Setup React-Native Font: The Easy Way

Having been a mentor, and currently mentoring students of Google Africa Developer Scholarship, I’ve seen a lot of developers struggle with this part when developing react-native applications. And honestly, I tell you at first it seems like a hard nut to crack, but it’s one of the easiest things to do on react-native development. And it’s also a core aspect, you will definitely need to add an external font in any application, so you must learn it and add that to your wealth of knowledge.

One reason I see why it’s quite daunting is because of some online resources on this topic, they have the right title and so they come up top on searches but they bring in a long process that involves several native configurations (differently on IOS — Swift, and Android — Java). And when developers try these steps, it results in new native errors that become overwhelmingly tiring and they end up in Flutter😄. React-Native is really fun if you get a hold of it. Because of this, I felt it’s high time to put out an easy method, so anyone won’t have to go through any longer configuration process. And yeah, the reason why I gave it that mouthwatering title, everyone likes ‘easy’.

There are so many ways to add fonts in react-native, but for easy sake, I’ll take you through two easy ways to do this.

I already assume you have React Native development knowledge already, and you have a react-native project created with the react-native cli (please not expo) that you want to add fonts to. So let’s get to it, shall we?

1. Don’t use React-Native-Package-Manager(RNPM):

Years back the process of adding native dependencies to React-Native projects — for instance adding fonts, was tedious and far from perfect, no wonder we have those online resources with a long configuration process. So React-Native-Package-Manager was created to bring back the ease and fun.

But RNPM has been merged into React Native core, like one or two years back. This means that you don’t need RNPM anymore. So please they don’t want you to use it. Stop using it.

Read more about the updates here

Sadly developers in 2020 ignore the deprecation warning and still go-ahead to use it. Perhaps, they have no idea about the merge. The reason is it could work during development, but might not in production. And most React-Native updates are breaking changes, you won’t want issues in the future, would you? There is a better way to add fonts than that, let’s check it out.

2. React-Native Link:
Yes, this is the better way for now. Maybe someday, it’ll all be automatic. So let’s get started.

• First, make sure you have your fonts ready, you can download your fonts from GoogleFonts, AdobeFonts, etc. Fonts can be in .ttf, or .otf extension.
• Second, create a configuration file in the root of your project for fonts. Create a file called:

react-native.config.js

create a configuration for your fonts

There you go!

• Third, let’s create the file to house our fonts. You can have any structure you prefer. For me, I have created a folder called fonts inside the assets folder. Like this:

Create a folder for your fonts

And place your downloaded fonts into it.

• Fourthly, write a configuration in the configuration file we created in step one to allow react-native read and access the fonts inside the font folder and automatically configure them for IOS and Android for us. In my case, that’ll be ./src/assets/fonts

Add this code below:

• Step Five, now natively set the fonts for Android and IOS. You don’t need to manually do that. The react-native link command will do that.

Run this on your terminal:

react-native link

fonts have been successfully added

Hooray! That message on your terminal shows that the fonts have been added successfully. Now you can possibly check to make sure the fonts have been added correctly on Android and IOS

IOS: Check your ios/{project-name}/info.plist
Scroll down and you’ll find your fonts. They should look like this:

Android: Check your android/app/src/main/assets/fonts
You’ll find something like this:

If you find your fonts this way, it means your fonts have been set up successfully and can be used on Android and IOS. But if you can’t, then perhaps you’ve done something wrong or you’ve missed a step. Go back and find what you missed.

Now you can add the fonts to your project. It is quite essential you note this: If you use the wrong name of the font you added in your react-native font-family, it’ll return an error for you, most especially for fonts with .otf extension. So use the original name of the fonts. You can find the original name when you click on the font in the folder outside your code-editor.

For instance, the fonts I added:
Sofia Pro Bold

The original name of the font is Sofia Pro, so in fontFamily, I’ll use rather use ‘Sofia Pro’. And that’s pretty much it!

To learn this the practical way and get your hands dirty, I’ll be making a video tutorial on youtube, I’ll edit and post it here when it’s out.

So what if you made a mistake with the font you added and you want it removed. Deleting the font from the font folder will cause more harm than good. I have also published:

Remove React-Native Font: The Easy Way

If you find this helpful. Do well to leave a clap. You can also follow me, and subscribe to my YouTube channel:

Twitter, YouTube, GitHub, LinkedIn

So grab a beer, cheers! 🍻🍻