How to add custom font in react native easily in 4 steps | Android

Using custom font in react native for the first time can be tricky. Today you will learn how you can add custom font in react native easily in just 4 steps.

Table of Contents

S.N.	Contents
1.	Introduction
2.	Steps to add custom font in react native a. Integrating app loading b. Importing the font c. Using the font
3.	Conclusion

Introduction

React Native is an open-source mobile application framework created by Facebook, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use React's framework along with native platform capabilities.

Adding Custom Fonts to React Native App is quite easy after you get used to it. Adding custom fonts to a react-native app was a real pain for me when I moved from web to react-native. All we have to do on the web is add a script from google fonts, and yeah, use it! But it is not as straight forward as the web in react-native. I am writing down the steps I did to add custom fonts to my app. So  lets get started.

Steps to add custom font in react native

Integrating app loading

1. Run the below command on the terminal to install the app loading package

npm i expo-app-loading

Importing the font

2. Add the below code to your react file (For me App.js ) to import the packages.

import AppLoading from "expo-app-loading";
import { useFonts } from "expo-font";

Then download the desired font from Google Font. After downloading the font unzip the folder. Then create a fonts folder inside assets folder in your project directory. Then you need to copy the font files to the fonts folder in your project directory.

3. Now you need to require your font to the project to use it. To do so, write the below code and replace the FONT_NAME with the name of the font. Check out the list of the fonts available in expo.

let [fontsLoaded] = useFonts({
    FONT_NAME: require("./assets/fonts/FONT_NAME.ttf"),
});

Using the font

4. Now to use the imported font in your project you just need to write the below code. You need to replace the FONT_NAME with the name of the font you are using.

if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return (
      <Text style={{ fontFamily: 'FONT_NAME'}}>Hello!</Text>
   );
} 

Conclusion

Finally, In this way you can use any kind of custom font in your react native project. If you get any kind of errors, feel free to comment down below. Share it with your dev friends so that others can also easily use custom font in react native projects.

To know more about coding and tech news stay updated with The Info Docs.

Reference- Wikipedia

Know more about adding custom font - Add custom font