Add fonts on React Native

Last week I was working on a project in React Native. It came time to add custom fonts. It was the pits trying to get it working. I finally realized I had to import the fonts onto Xcode. I’m going to tell you how to do it, but first make sure you are up to version with react-native.

Step 1: Include your fonts in your Xcode project

Your fonts should be *.ttf or *.otf files.Make sure the fonts are lowercase only and follow this pattern:

fontname.ttf,

fontname_bold.ttf,

fontname_light.ttf,

fontname_bold_italic.ttf.

Step 2: Make sure that they’re included in the target

Click on the font that you just added in the left column, and see if the font is selected under “Target Membership” on the right column.

Step 3: Double check that your fonts are included as Resources in your bundle

Click on your Xcode project file in the left hand column, then select “Build Phases”. Make sure that your font has been added under “Copy Bundle Resources” (this should have been done automatically).

Step 4: Include your iOS custom fonts in your application plist

In your main app folder in your Xcode project, select info.plist. After this is selected, click on “Information Property List”, and then click the plus sign. In the dropdown, choose “Fonts provided by application”. Copy and paste the exact name of the file under “Value” on the right hand column of this row.

Step 5: Find the name of the font (optional)

If you do not know the exact name of the font, it will be hard to use it. It is also useful to do the following step and see all of the different fonts you have at your disposal:

Go in AppDelegate.m, under NSURL *jsCodeLocation,

This will log out all available fonts, including the new font(s) that you have added:

Step 6: Use the font in your app:

You can add your styles like this: {fontFamily: ‘fontname’}