Adding Custom Fonts to A React Native Application for IOS

Looking to learn React Native? Checkout React Native Training.

Check here for an updated way to

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

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:

In AppDelegate.m, under NSURL *jsCodeLocation, paste the following code. This will log out all available fonts, including the new font(s) that you have added:

for (NSString* family in [UIFont familyNames])
{
NSLog(@"%@", family);
for (NSString* name in [UIFont fontNamesForFamilyName: family])
{
NSLog(@" %@", name);
}
}

Step 6: Use the font in your app:

The above screenshot is the result of logging out the fonts with the code snippet in step 5

In your style, use the following code to display your fonts:

<Text style={{fontFamily: 'Zap Raygun V2.0'}}>Hello</Text>
<Text style={{fontFamily: 'Didot'}}>World</Text>
<Text style={{fontFamily: 'Savoye LET'}}>This</Text>
<Text style={{fontFamily: 'Symbol'}}>Is</Text>
<Text style={{fontFamily: 'Menlo'}}>How</Text>
<Text style={{fontFamily: 'Menlo Italic'}}>To</Text>
<Text style={{fontFamily: 'Menlo Bold'}}>Use</Text>
<Text style={{fontFamily: 'Badoni 72 Smallcaps'}}>Fonts</Text>
<Text style={{fontFamily: 'DIN Alternate'}}>In</Text>
<Text style={{fontFamily: 'DIN ALternate-Bold'}}>React Native</Text>

My Name is Nader Dabit @dabit3. I am a developer at @schoolstatusapp where we use React Native in production. If you enjoyed this article, please recommend and share it! Thanks for your time.