9 thoughts on “Unrecognized font family ‘Rubik-Regular’”

  1. I had the same issue even after trying to link it again, but restarting the app using react-native run-ios resolved the issue for me

  2. Hi, Same issue here. And neither react-native link or react-native run-ios solve the issue.

    EDIT: I think it comes from the fact that I use RN 0.40.

  7. A resolution is that drag the folder ‘node_modules/@shoutem/ui/fonts’ to your project in Xcode. And then edit Info.plist, add a property called Fonts provided by application and add the fonts to the list. Like this:
    image

6 thoughts on “Unrecognized font family ‘Rubik-Regular’”

  2. Thanks to @rozenshtein, I got this to work by running this in the project’s root:

    npm i -S react-native-vector-icons
npm i -S react-native-linear-gradient
# I don't know if this is necessary but I ran it anyway
react-native link

react-native run-ios

    And it loaded with no errors.

  3. Thanks @pferdefleisch , this fixed!

    yarn add react-native-vector-icons
yarn add react-native-linear-gradient

    Or using npm i -S;

  5. fontFamily ‘Rubik-Regular’ is not a system font and has not been loaded through Expo.Font.loadAsync.

    • If you intended to use a system font, make sure you typed the name correctly andthat it is supported by your device operating system.

    • If this is a custom font, be sure to load it with Expo.Font.loadAsync.

    • node_modules/expo/src/Font.js:34:10 in processFontFamily

    • … 21 more stack frames from framework internals

  6. Hey guys.

    If you’re using expo, you have to load custom fonts asynchronously, as is shown in our example create-react-native-app, here.

    If you’re using regular react-native init, make sure you’ve successfully linked the package.

    Why all this? Because fonts are loaded into the binary of the app, meaning any package with a font is considered a package with native dependencies.

1 possible answer(s) on “Unrecognized font family ‘Rubik-Regular’”

  1. Since fonts are loaded into the app binary, they’re considered a native dependency.

    If you’re using react-native init, you have to link the UI toolkit with react-native link, make sure you install the toolkit with the --save flag so the package.json contains the package and the React Native CLI knows it has to link it.

    If you’re using create-react-native-app, you will have to asynchronously load the fonts as is described here.

    import React, { Component } from 'react';
import { StatusBar } from 'react-native';
import { Font, AppLoading } from 'expo';
import { View, Examples } from '@shoutem/ui';

export default class App extends React.Component {
  state = {
    fontsAreLoaded: false,
  };

  async componentWillMount() {
    await Font.loadAsync({
      'Rubik-Black': require('./node_modules/@shoutem/ui/fonts/Rubik-Black.ttf'),
      'Rubik-BlackItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-BlackItalic.ttf'),
      'Rubik-Bold': require('./node_modules/@shoutem/ui/fonts/Rubik-Bold.ttf'),
      'Rubik-BoldItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-BoldItalic.ttf'),
      'Rubik-Italic': require('./node_modules/@shoutem/ui/fonts/Rubik-Italic.ttf'),
      'Rubik-Light': require('./node_modules/@shoutem/ui/fonts/Rubik-Light.ttf'),
      'Rubik-LightItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-LightItalic.ttf'),
      'Rubik-Medium': require('./node_modules/@shoutem/ui/fonts/Rubik-Medium.ttf'),
      'Rubik-MediumItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-MediumItalic.ttf'),
      'Rubik-Regular': require('./node_modules/@shoutem/ui/fonts/Rubik-Regular.ttf'),
      'rubicon-icon-font': require('./node_modules/@shoutem/ui/fonts/rubicon-icon-font.ttf'),
    });

    this.setState({ fontsAreLoaded: true });
  }

  render() {
    if (!this.state.fontsAreLoaded) {
      return <AppLoading />;
    }

    return (
      <View styleName="flexible">
        <Examples />
        <StatusBar barStyle="default" hidden={false} />
      </View>
    );
  }
}

1 possible answer(s) on “Unrecognized font family ‘Rubik-Regular’”

  1. This was broken for me too, restarting the server did nothing. Also none of the previous fixes worked. Just a good reason not to use this lib.