Custom Fonts in React Native for iOS & Android Builds

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!

Now it’s finally time to view your font! Make sure you call the font name with all the capitals and hyphens in the correct place.

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

Link Custom Fonts Manually for Android

This was a lot easier to set-up than for iOS, however on a side note make sure your font file names are EXACTLY how they were named in your fonts folder in xCode.

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

Above is the long way to link fonts, but at least you get a bigger picture of what exactly is going on. Now we’ll do the same thing of linking the fonts for both iOS and Android at the same time with react-native link.

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": [
"./assets/fonts/"
]
}

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! 💅