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' 

Does this mean I have to mess with the iOS's way to import font directly?

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!

Answer 2

UPDATE

You don't need to install rnpm manually now. After step one, in step two, you can just use the command react-native link and all your assets will be linked. rnpm is now being merged with react-naitve. Checkout this commit on RN https://github.com/facebook/react-native/commit/e8b508144fdcdea436cf4d80d99daec757505c70

---

There is an easier way of doing things through `rnpm. It adds fonts to both android and ios. Place the font you want to add to a suitable location inside your project directory. In your package.json just add the following:

step1

...     "rnpm": {           "assets": ["path/to/your/font/directory"]     }, ... 

step2

Then from command line do: rnpm link

you can now happily use your fonts in your app.

Note: you have to have rnpm installed for this to work. Just do npm install -g rnpm

Here is the documentation: https://github.com/rnpm/rnpm#advanced-usage