DEV Community

Sumrit Grover
Sumrit Grover

Posted on

Custom Fonts and React Native - The complete story

When it comes to creating an effective user interface for an application, font is crucial.

Follow the steps and your app would have the custom fonts that you need

Download and save the required fonts in the assets/fonts folder

You can save the fonts in some other folder as well but this is the standard way

Image description

Now create a config file by the name of react-native.config.js in the root directory of your project and write the following code in that file

Image description

In the terminal link the custom fonts using the following command
"npx react-native link"
Image description

Tip:

Don't use fontWeight property while styling your text as it would override and remove the custom fonts

Image description

TL;DR

  • Save the fonts in assets/fonts folder
  • Create a config file by the name of react-native.config.js
  • Link your fonts using npx react-native link
  • Enjoy using the fonts

Discussion (0)