Use custom-font in React-Native

Question

I would like to use custom font in my app, but I keep getting error

[RCTLog][tid:0x78f70450][RCTConvert.m:581]>Unrecognized font family \'Roboto\'
         


        

Answer 1

Many answers are here for react-native version < 0.60

For those who are using react-native version > 0.60 , 'rnpm' is deprecated and custom fonts will not work.

Now, in order to add custom font in react-native version > 0.60 you will have to :

1- Create a file named react-native.config.js in the root folder of your project.

2- add this in that new file

module.exports = {
  assets: ['./assets/fonts/']
};

3- run react-native link command in the root project path.

PS Make sure you have the right path for the fonts folder before running react-native link command

Answer 2

If you are using Create React Native App, when running react-native link you will see this:

react-native link can not be used in Create React Native App projects. If you need to include a library that relies on custom native code, you might have to eject first. See https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md for more information.

If all you are trying to do is to add custom fonts, instead of ejecting, you could use Expo, which is also included by default with CRNA. Essentially, you do:

await Font.loadAsync({
  'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
});

Also, you can only do ttf or otf formatted fonts, no ttc fonts: https://developer.apple.com/documentation/uikit/text_display_and_fonts/adding_a_custom_font_to_your_app

Here is a detailed doc from Expo: https://docs.expo.io/versions/latest/guides/using-custom-fonts