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. Create a new group Fonts within your Xcode project

2. Drag and drop fonts from Finder to the Fonts group you just created, and check your project name in Add to targets list

3. Expand your project name folder within the main directory in your project and open Info.plist

4. Add Fonts provided by application as a new key

5. Add a new item under Fonts provided by application, and set the item value to the full font name with extension for each font you've added to the fonts folder

   • i.e. if the font file name is OpenSans-ExtraBold.ttf, then that should be the value of the item.

6. To use the font in React Native, simply set the fontFamily style attribute for the element (see this). Note that the style should use the name of the font rather than the file name.

   • e.g. in the example above, the style attribute would be fontFamily: 'Open Sans'

7. Run Shift + Command + K to clean last build

8. Then Command + B to start a new build

9. And finally Command + R to run the application

If you still see the error Unrecognized font family restart your react packager.

https://github.com/alucic/react-native-cheat-sheet

Hope it helps!