Update 05/13/19: Clément Taboulot (@ClementTabs)

Your React Native application needs a custom font to be the prettiest ? Here are the few steps you need to add it.

How ?

1. Get the font (2 mins)

In order to add your font to your app, you'll need the .ttf (other formats such as .otf are also supported) files for all supported styles (bold, italic ...) or sample depending your need.

In our case we are going to download Sarpanch.

2. Rename your font (5 mins)

Normally, Google font are correctly named. But in some cases, you need to rename them. You need to use the PostScript name.

Option 1:

Open your terminal and run this command in your font folder's. It will give you all the PostScript name :

++pre>$ for file in "$arg"*.{ttf,otf}; do fc-scan --format "%{postscriptname}\n" $file; done
Sarpanch-Black
Sarpanch-Bold
Sarpanch-ExtraBold
Sarpanch-Medium
Sarpanch-Regular
Sarpanch-SemiBold++/pre>

Then rename your fonts.

Option 2:

You can also, get the PostScript name by installing the font and then reading it in Font Book app (press Cmd + i on a font).

3. Add the font in your project (2 mins)

Move your font the the appropriate folder :

++pre>CustomFontApp/
 assets/
   fonts/
     Sarpanch/
       Sarpanch-Black.ttf
       Sarpanch-Bold.ttf
       Sarpanch-ExtraBold.ttf
       Sarpanch-Medium.ttf
       Sarpanch-Regular.ttf
       Sarpanch-SemiBold.ttf++/pre>

4. Link your font (10 mins)

First, add the following key to your ++code>react-native.config.js:++/code>

++pre>assets: ['./assets/fonts/']++/pre>

You can also add the rnpm link to your font in your project's ++code>package.json++/code>:

++pre>"rnpm": {
"assets": ["assets/fonts/Sarpanch"]
}++/pre>

We used to be able to use ++code>react-native link++/code> to link our fonts. But it does not work anymore from react-native 0.59 version. So we'll have to do it by hand!

First, on Android

Copy the fonts in the android/app/src/main/assets/fonts/ folder

You can either drag and drop them, or use the following command line:

++pre> cp assets/fonts/Sarpanch/* android/app/src/main/assets/fonts/++/pre>

Notice that we directly add our font files inside the android fonts folder. Be careful not to add them inside a folder of your font's name (Sarpanch).

Then, on ios

We're gonna have two steps here. 

First, open XCode. Clic on the folder icon in the top-left corner, then select your project's name. In the Targets menu, click on your project's name. Click on Build Phases. In the "Copy Bundle Resources" section, add your font files.

Now, and this is the last step, open your Info.plist file, and add a new key, with all your font files names:

++pre><dict>
...
<key>UIAppFonts</key>
<array>
<string>Sarpanch-Black.ttf</string>
<string>Sarpanch-Bold.ttf</string>
<string>Sarpanch-ExtraBold.ttf</string>
<string>Sarpanch-Medium.ttf</string>
<string>Sarpanch-Regular.ttf</string>
<string>Sarpanch-SemiBold.ttf</string>
</array>
</dict>
++/pre>

5. Check (10 mins)

You need to verify that the installation was a success. For that, display several Text that use different style of your font.

++pre><Text style={{fontFamily:'Sarpanch-SemiBold'}}>My awesome font</Text>;++/pre>

Note that the app should be rebuilt for the font to be recognized:

• react-native run-ios
• react-native run-android

Verify that your font works well on both Android and iOS !

iOS:

Android:

6. Create a theme (5 mins).

Create a theme which define different text styles:

++pre>const theme = {
title : {
  fontFamily: "Sarpanch-Bold"
},
body : {
  fontFamily: "Sarpanch-Regular"
}
}++/pre>

Then you can use it directly in your style everywhere in your app:

++pre><Text style={theme.title}>My awesome font</Text>;++/pre>

Other way

You can notice that we make the choice to not use the fontWeight property in our style. Indeed, there is other solutions where your can use it but it only works on iOS. For Android you will need to write a service that will make the translation between the fontWeight and the full name of your font (ex: Sarpanch-ExtraBold for fontWeight: 800).

In my experience this way of doing create severals problems :
- fonts are not correctly named;
- developers take time to write correctly the fonction;
- developers can modify this function and create some errors in your application.

To avoid those drawbacks, we recommend now to use the Postscript name directly in the fontFamily props.

Tips

On iOS, you can checkout the name of the Font Families available by adding those few lines in your Objective-C code:

++pre>NSArray \*fontFamilies = [UIFont familyNames];

for (int i = 0; i < [fontFamilies count]; i++)
{
 NSString *fontFamily = [fontFamilies objectAtIndex:i];
 NSArray *fontNames = [UIFont fontNamesForFamilyName:[fontFamilies objectAtIndex:i]];
 NSLog (@"%@: %@", fontFamily, fontNames);
}++/pre>

Going further

You can also add a custom font for your custom icons. Check out our Add custom icons to your React Native application article for more information on this.