Installing custom fonts (ttf or otf) on react-native (0.60+) projects.

I've decided to write that article based on my own experience with custom fonts, there are some really great tutorials and solutions over the internet, but I had to group some of those to make it work on my project, mainly because I am using react-native-vector-icons, and faced some conflicts.

You're probably here looking for a solution to iOS 'unrecognized font family', right? But let me tell you how to install custom fonts first, then, I hope I can help you with the problems (if you have).

Installing custom fonts

First, download your font family. In most cases you will download a package with the font variations. I will use Montserrat, and you can find it here.

You should have something like this

Then, create a folder on your project called assets, and inside the assets folder, create a folder called fonts, then, put your font files inside the fonts folder. And you should have something like this

Want those icons on vscode? Install the Material Icon Theme extension.

Now you have to create a file named react-native.config.js on your project root directory with the below content

Pay attention to the directory, in that case, the assets folder is at the same directory as the react-native.config.js file.

Linking your fonts

Read it carefully

In most cases, if you run npx react-native link, you should be ready to use your brand new font. BUT, if you are using react-native-vector-icons, like I am, you may face some problems with iOS compilation, so, I will show you how to manually link the fonts, and It's pretty easy.

Android manual linking

To start using your custom fonts on android, you just have to copy your fonts to android/app/src/main/assets/fonts. And that's it.

iOS manual linking

First, add your fonts to your project by clicking at your project's name at the left panel, then going to Build Phases, and clicking in the + button on the Copy Bundle Resources.

Then, add your fonts to the info.plist file.

Now you should clean your build (with Command + shift + K, or going to Product menu and clicking Clean build folder) and run your app.

And finally you use your new fonts like this.

Common problems

Sometimes your font name is not the same for Android and iOS. In most cases, in android, the font is the same as the file, for example, I had this problem when using SF-Compact font.

So, how do you find your font name on iOS? Just add this inside the didFinishLaunchingWithOptions method on your AppDelegate.m

Then, when you launch your app with xcode, you will be able to see all the fonts installed on your app, so you just have to use it the way it is listed on your console.

And that's it.