React Native: Fonts

Did you know that you can add custom fonts in React Native? You can use any font on the web in the React Native project, and it is really simple. It takes just 3 easy steps. Let's dive right in.

cover image

1. Getting font files

First, you need to download font files. I suggest the woff format as it is optimized and file size is smaller, but you can also go with ttf or otf.

You can download fonts from Google fonts. Just click on the font that you like and press Download family in the top right corner.

Place fonts inside a project. I like to place them under src/assets/fonts.

2. Creating config file

Create a file called react-native.config.js at the root of your project and add the following code:

module.exports = { project: { ios:{}, android:{} }, assets:['./src/assets/fonts/'], //tweak this to point to where you placed your fonts }

3. Linking the assets

This is as easy as running this command in your project

npx react-native link

It will do everything for you, and after it's done, just rerun the app to make sure everything is applied correctly.

The syntax for applying custom fonts to the elements in React Native looks like this

// some style in the project ... text: { fontFamily: 'Roboto-Regular', } ...

You just have to use the font file name in fontFamily.