React Native: Adding Fonts

Adding fonts can be a little tough to figure out with React Native. This is a simple reference guide for anyone having issues. This little guide should also help you if you are running into an “Unrecognized font family” error. This process will add the fonts to Xcode which will allow you to reference and use in your React Native app. For this example, we are going to use the font Josefin.

Pick a typeface from Font Book

Looking at the font information:

Make sure to note the following information about your font:

• File name (ours will be Josefin.ttf
• Font family (ours will be Josefin Sans)

Get your file assets

I used Josefin Sans regular.ttf and renamed to just Josefin.ttf

Add the font to Xcode

1. Drag and drop fonts from Finder to your Xcode project.
2. Select your application name in Add to targets list
3. Open Info.plist from Navigator in Xcode.
4. Add Fonts provided by application as a new key
   • Expand Fonts provided by application array to find an initial Item 0 entry with no value
   • Set the Item 0 value to the file name (with extension)
   • Create additional entries for more fonts
5. Run Shift + Command + K to clean last build
6. Run Command + B to start a new build
7. Run Command + R to run the application

Note: If you receive errors such as Unrecognized font family you may need to stop your project, clean and then build again. One way to ensure proper loading of the fonts is to open LaunchImage.xib and use these custom fonts on your startup screen. Xcode will do some magic for you behind the scenes to assure your font is copied into the application.

Using a custom font in React Native

With our Josefin example from above, we would use Josefin Sans in the code below:

var styles = React.StyleSheet.create({
  title: {
    fontFamily: 'Font Family Name'
  }
});