Custom Fonts in React Native for iOS & Android Builds

Kirsten Swanson
Jul 29, 2017 · 5 min read

Don’t want to use the native fonts with React Native…well let’s add some custom fonts then! I’ll show you both approaches to installing custom fonts, one method uses react-native link, while the other method is linking manually, which I started with since I wanted to understand first-hand how the fonts were being set-up in Xcode.

Link Custom Fonts Manually for iOS

1. Open your project in Xcode and make a fonts folder

You will drag and drop your font files into this newly created folder. When dropping the files into the folder you’ll be prompted with this pop-up window. Make sure you select your project name as the added target.

2. Confirm that each font has the correct Target Membership

3. Check that your fonts are included in your bundled resources within the Build Phases section

4. Add your fonts to the Info.plist

Within your project folder navigate to the Info.plist file where you will want to add your fonts. Hover on the last line in the list and click on the plus sign to add a new line. Select the option “Fonts provided by application.” Now you will add all your fonts and make sure the string is EXACTLY THE SAME as the font file (.otf, .ttf) name.

Here’s an example with the fonts I used:

*Optional step - check the exact name of your font

You need to know the exact name of the font in order to reference it in your code. This step definitely saved me time in order to see how the font name was camel cased and hyphenated.

Navigate to the AppDelegate.m file and add these lines of code below
NSURL *jsCodeLocation;

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

You will need to have your console open in order to see the results of all your available fonts. You can activate the console within the View tab or press shift + ⌘ + C.

Build your project and in the console you will now see the font names.

6. Use your new custom font/fonts!

title: {
fontFamily: 'MarkPro-Bold',
description: {
fontFamily: 'MarkPro',

Link Custom Fonts Manually for Android

In your android/app/src/main folder structure you will create an assets folder with the fonts folder inside. In the fonts folder you will place your font files here. I opened my finder and just did some dragging and dropping in order to get these files in place here.

Now you can state the fontFamily just as you did for iOS and just rebuild your Android emulator and you should see the custom font/fonts you just added!

Link Custom Fonts With react-native link

*If your React Native version is ≥ 0.60 please reference Benji’s instructions found in the responses below.

1. Create an assets folder at the root of your project directory

2. Create a fonts folder within the assets folder and place your font files here

3. In your package.json specify where the custom fonts are located

"rnpm": {
"assets": [

4. Next run the command react-native link

You will see that both the iOS and Android projects were linked. Also you will see a warning that a Resources folder was built. This Resources folder replaces the fonts folder that we had to make manually above.

Also you will see that the font references were created in your Info.plist file and in your editor you will see your fonts were copied over into your android/app/src/main/assets/fonts file path.

Congrats, now you know two ways of adding custom fonts to your React Native app. Now have fun choosing the perfect fonts to add style to your app! 💅

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store