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.

  3. 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’

  1. 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.

  2. Thanks @pferdefleisch , this fixed!

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

    Or using npm i -S;

  3. 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

  4. 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.