How To Add Fonts To React Native

Every developer has his own preferences about fonts, or you style need specific font. Today I will show to add fonts to your app, Changing fonts in react native expo is something easy to do and will not take you time.

First Step

We have create a folder called fonts inside assets to hold all files of fronts that we want to add to our project.

As you see in the picture we have a file called DancingScript.ttf . To find fonts you like google provides free fonts https://fonts.google.com/. download any font you like and transfer file to fonts folder that we created already.

Second Step

Now to is time to use our font we downloaded, to do so we have to install a model called Font from expo. Run this code to install it expo install expo-font , after we import it in main app

import {useFonts} from "expo-font";

Let ‘s invoke the font and loaded by copy and past this code

const [loaded] = useFonts({
    DancingScript: require('./assets/fonts/DancingScript.ttf'),
  });

loaded will return a boolean detecting if the font loaded and ready to use or no