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.
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
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
2. Creating config file
Create a file called
react-native.config.js at the root of your project and add the following code:
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
You just have to use the font file name in