Add custom fonts to your react native app

You started a react native application and now it’s time to add custom fonts to your app, for example google fonts. Let’s see how we can achieve this in our react native application.

First step in our react native app is to add a small configuration in package.json file.

In the above picture we take advantage of react native package manager and we added the the path for the assets folder, the place where you should add all the custom fonts for the react native application.

After we added the configuration in package.json don’t forget to create assets folder in the root of the application.

All we need to do right now is to choose a custom font from google fonts, so head to the https://fonts.google.com/ and look for the right font, i choose Roboto for this example.

Next step is to add the font pressing on plus icon and then click on download top-right icon in order to get Roboto files locally.

Copy all the fonts downloaded locally to your assets/fonts directory and then run react-native link to link all the assets.

Adding Fonts to Android

If you check the android folder from the app and search for the fonts, you will see all the custom fonts copied to the android folder android/app/src/main/assets/fonts/.

React Native Styles

Now because we have all the fonts linked in react-native app it’s simple to add the font to react native styles.

const styles = StyleSheet.create({
  demo: {
    fontFamily: "Roboto",
    fontSize: 20,
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});

Sharing is caring!