How To Add Custom Fonts to Your React-Native Project

When I am beginning to plan side projects, one of the first aspects I like to think about is the fonts I want to use for the project.

Thinking of this, I realised in the past I’ve had some issues when integrating custom fonts into my React-Native project, so I thought it’d be a cool idea to make a tutorial on how to do this along with plenty of screenshots along the way. Let’s do this.

“The Day Before the Exam” (1895) by Leonid Osipovich Pasternak

The first step you’ll want to take is to create a React-Native project in your chosen folder destination with the below command.

react-native init MyProject

Secondly, you will want to go and choose a font to use in your app. I always use Google fonts for this.

What you’ll want to do is look for a font you like, then click the plus button to the right of it. This means you’ve now selected the font. Then click on the family you just selected, and then click the download button on the top right of the pop-up.

This will then download the package of fonts as a ZIP folder. Extract the folder into the location of your choice on your device. I usually extract them into the Downloads folder.

Note: One thing to be cautious of when integrating custom fonts into your project is that Android will use the font file name when referencing the font, whereas IOS will use the postscript name. To check the postscript name of the file you will need to use Font Book. So in my example, I will be checking the postscript name of the font Montserrat.

As you can see from the screenshot below, the full name for the Montserrat font is Montserrat Regular; however, the postscript name is Montserrat-Regular, so, if necessary, you’ll need to rename the font files to be the postscript file name. However, with Montserrat the font file name is already like the postscript name, so for this font I don’t have to do it.

The next step is to create a folder in the root of your project that’ll then contain another folder containing the font files you want to add.

For this tutorial, I have created a folder called myassets and inside of that another folder called myfonts. Within the myfonts folder, I have copied the fonts I want to use.

The next step is to create a config file in the root of your project that’ll contain the reference to your assets folder. Using this allows us to link our fonts to Android and iOS using a React-Native link.

The next step of the tutorial depends on what version of React Native you’re using. If you’re using a React Native version greater than 0.60, then you’ll need to create a config file, which I’ll explain how to do below. However, if your React-Native project version is below 0.60, then you can rnpm. I’ll show both below. But I will show the config file first.

So in the root of your project, you’ll need to create a file named react-native.config.js. Don’t worry about the project object for the moment — just ensure the assets value is the same directory file path in your project that contains the font names. This may be different to yours, depending on what you have named the folders.

module.exports = {
project: {
ios: {},
android: {}, // grouped into "project"
},
assets: ["./myassets/myfonts/"], // stays the same
};

However, you can check your React-Native version by entering the below command into the terminal.

react-native -v

It should output something like the following, although both values may be different on your machine.

react-native-cli: 2.0.1
react-native: 0.61.2

If you find that you’re using a version below 0.60, then you’ll need to add rnpm to your package.json file, which will contain the file directory link to your fonts.

In addition, you now need to enter and run this command:

react-native link

This will then link your assets to the Android and iOS folders and create groups/folders in the Xcode and Android Studio projects, if necessary. You can check to see if your font(s) have been added successfully by checking in the iOS info.plist file. If they’re in there, then they have been linked successfully.

The same can be said of your Android project, if you open it using Android Studio, you should be able to see a new folder called “assets” that contains a folder called “fonts,” which will then contain the font files.

This should be it in terms of linking and syncing (haha, see what I did there?) your custom fonts. The next thing is to try them out in your code.

Below is a screenshot of how I’ve implemented the custom font. Update: To see these changes take effect in your project simulator or real phone you may need to close your terminal connection and simulator first, then restart the project.

Finally, below is a screenshot of my custom fonts shown on the React-Native app simulator.

If you have any issues with this tutorial, let me know, and I’ll get back to you ASAP — as in the past, I have struggled a bit with adding custom fonts to my projects. But I think it’s much easier nowadays. That being said, thank you for reading my article!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: