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

1. add the font files (i.e. .otf OR .ttf) in root/assets/font folder in your project.

2. in package.json: rnpm: "assets": ["./assets/font"],

   3. if after building your fonts are not being supported then add this one file in root level:

react-native.config.js

 module.exports = {
    project: {
        ios: {},
        android: {},
    },
    assets: ['./assets/fonts']
    };

4. ex: font-name -> Robotto-Regular.ttf then use it like below in styles:

fontFamily: 'Robotto-Regular'

5. run react-native link
6. Then in android side(android studio) and ios side(Xcode) sync the project.
7. run react-native run-android OR react-native run-ios

This should resolve any errors which will be coming of fonts not supporting and you can use your custom fonts.