Thursday, 15 September 2022

Adding Custom Font in Your React Native App!

Written by    on  

 Note: This post corresponds to React Native 0.69+.

  1. Get the fonts that you want to use in your app. You can search and download the fonts from Google Fonts as it has a huge collection of free fonts.
  2. After downloading the fonts, make sure that you've placed the fonts in a 'fonts' folder under the 'assets' directory at the root of your application.
    • PROJECT-DIRECTORY/assets/fonts

Adding Configuration File

  1. Create a new file at the root of your project entitled react-native.config.js.
  2. Insert these lines into the file:

Linking Configuration File

  1. As of React Native 0.69+, you just have to run this command below to link the configuration file to both iOS and Android project files:

  2. That's about it! Now you can use fontFamily:'Nunito-Bold' in your code.
  3. If in case the font is not loading in the app simulator, just restart the simulator with either npx react-native run-ios for iOS simulator, or npx react-native run-android for Android simulator. The project will be rebuilt with the recent changes/link you've added to the project.

Hafiz Hanif, PhD