How to add and remove custom fonts in React Native

Daniel Skripnik
Jan 20, 2017 · 3 min read
Image for post
Image for post

Every time when I need to include fonts to my React Native project for IOS and Android I start to google searching ‘that one tutorial with fewer steps’ to make it faster. And every time it takes much more time than I expect to. So I found a better faster and shorter solution which takes several lines of code.

Let’s start! 🚀

Image for post
Image for post
https://join.slack.com/t/reactn/shared_invite/enQtNDI4MjQwNzA5MjAyLWEyOWM3OTJiMDNlODRlOTZkNzhlMWFkZTZiMDEwYzI0ZGYyZTQ0MGM5YjRiMjNjZjZiYmNjMTM4YTU0MWMyNGQ

Adding / Linking fonts for IOS and Android at once

1. First step

Collect all fonts you want to use for IOS and Android and place it in the directory inside your project. For example in ./assets/fonts/

2. Second step

Add the following line in your package.json:

“rnpm”: {
“assets”: [“./path to your fonts”]
}
in our example path is - ./assets/fonts

3. Third step

And finally, run in terminal:

$ react-native link

After running link command you should see something like this in your terminal output:

Image for post
Image for post
$ react-native link result

That’s all! 💥💥💥💥💥 We are done. All your fonts are linked and can be used for both IOS and Android.


Removing / Unlinking fonts for IOS and Android

We saw above how to link fonts but unfortunately, there is no analog command for unlinking already linked fonts. Let’s see how we can do this.

Android:

Just remove fonts from the directory which was created by react-native link command. This directory is located in:

android/app/src/main/assets/

IOS:

For IOS there is a little bit longer path.

1. First step

Remove all fonts you want to delete from Info.plist file by opening XCode:

Image for post
Image for post
Info.plist

2. Second step

Remove all fonts left linked in XCode underBuild Phases > Copy Bundle Resources

Image for post
Image for post
MyProject > Build Phases > Copy Bundle Resources

NOTE:

After removing fonts you may be facing some errors from XCode like:

Image for post
Image for post
Error after removing fonts

Just skip it. This error appears because XCode sees a discrepancy between the previous git commit and the current state of your fonts folder. This message will disappear as soon as you will do git commit with your changes.

That’s all, folks!
Stay tuned & happy coding ;)
Daniel

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store