Adding Custom Fonts to A React Native Application for IOS

Looking to learn React Native? Checkout React Native Training.

This tutorial is outdated. Check here for a better way to do this.

Step 1: Include your fonts in your Xcode project

In the above image, you can see that “Zap Raygun V20 Regular.ttf” was added to the project. I did this by control clicking on the main project, and selecting “Add new file”.

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).