Change react native app font-family

Change font-family of React-native Application

Hi guys, In this article, we are going to learn about how to change the font-family of text also change whole application font using react-native-global-font. It is important for the developers to make clean and nice-looking design their App, and app font is one of the important things in designing UI, In this article, we learn about Change react native app font family so for this, we need to set default global font for our App to do this I have download the font AbrilFatface-Regular.ttf 

1. Add font in the assets folder

For Android, you need to create assets folder in path android\app\src\main\assets\fonts like below:

If you are using React-native <0.60.0 then add the following line in Package.json 

If you are using react-native >0.60.0 then it will give and error so you need to create react-native.config.js file in Project root folder and add following code in that file:

For iOS, you need to create assets for in Project root directory like below:

Also, you need to add info.plist and add a font in Resources folder in iOS

2. Install Global font library

To assign font-family to whole Application you need to install the following library

3. Import the following components

4. Use GlobalFont

Add the following lines in componentDidMount() method

This will change font-family in-app sometime we need to assign font-family like fontFamily: ‘AbrilFatface-Regular’ in text style, let’s see in below code

5. Home.js

This will reflect font-family on ActionBar as to know more about NavigationOptions I request you to see this post you will get full idea about Navigation drawer, Let’s see the output


Change font-family of React-native Application
Change font-family of React-native Application
Change font-family of React-native Application
Change font-family of React-native Application

As we see in above screenshots font-family in all project is changed, I have created an app with a react-navigation drawer to see this whole project please check this post

Thank you… happy coding… 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *