Add custom fonts to react-native 0.60+ easily in 3 steps

Image Courtesy: Brands Everywhere

In this article I will give you the steps to include custom fonts in any react-native project (0.60+).

1. Get the font file needed for your project

You need to obtain the required font files either in .ttf or .otf format. You can get some free fonts from Fontspace or Candyfonts. Place the font files in a folder you prefer. Here i am adding my fonts in App/assets/fonts

2. Create a configuration file

Create a configuration file react-native.config.js in the root project directory and add the code below:

3. Linking the font assets

Link the newly added asset by running the command:

yarn react-native link 

or

npx react-native link

If everything is right, you will see something like below, and you can see the new font assets in android/app/src/main/assets/fonts in the case of android and changes in the Info.plist in case of iOS.

Success message when linked with yarn react-native link

and finally, Re-run your app to initialise with the newly bundled resources (i.e the fonts).

npx react-native run-android

or

yarn run android

Note: Make sure to link the font assets every time you add a new font to your project.

Do comment, if you have any doubts or queries.

Always happy to help. Cheers 🍻

--

--

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
Aravind Madhusudhanan Nair

Aravind Madhusudhanan Nair

Writes about JS, React and React-Native development and other technology stuff.