Add a custom font to your React Native app

React Native

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.

Intro_GIF.gif

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 :

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

Move your font the the appropriate folder :

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

4. Link your font (2 mins)

If your'e running React-native version 0.60 or newer, add the following key to your project's react-native.config.js, in module.exports:

assets: ['./assets/fonts/']

Otherwise, add the rnpm link to your font in your project's package.json:

"rnpm": {
"assets": ["assets/fonts/Sarpanch"]
}

 

In any case, after this, run:

react-native link

This command will:

  • for iOS: link your font located in the path specified above (assets/fonts/) to your Xcode project
  • for Android: copy the font in the android/app/src/main/assets/fonts folder

 

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.

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

 

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:

ios_font

Android:
android_font

6. Create a theme (5 mins).

Create a theme which define different text styles:

const theme = {
title : {
fontFamily: "Sarpanch-Bold"
},
body : {
fontFamily: "Sarpanch-Regular"
}
}

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

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

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:

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);
}

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.