Add Custom External Text Fonts in React Native App Android iOS Tutorial

There are over a thousand Text fonts freely available on internet for web and mobile applications. Custom font gives us the facility to expand our way of representing content in mobile applications like we see in Websites, Because we can use any font according to our customer requirement. There are no limitation in text if you are using custom fonts. Custom fonts makes our app rich and expensive. So in this tutorial we would going to create a react native mobile application with Custom External Text Fonts applied on Text component using fontFamily style. All the fonts used in this tutorial is downloaded from Google Fonts. You can also download fonts from Google Fonts. So let’s get started 🙂 .

Contents in this project Add Custom External Text Fonts in React Native App :

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Download Custom External fonts.

3. Open you react native project’s folder and create two folders inside it . First one assets . Now create another folder named as fonts inside the assets folder.

4. Put all the downloaded fonts inside the assets/fonts folder.

5. Open package.json file present inside your project folder. Add below lines inside it. Using the below code we would tell the React native project about our newly created custom fonts folder.

6. Below is the copy of my package.json file after adding above code.

7. Now Open your project folder inside CMD / Terminal, like i did in below screenshot.

6. Run react-native link  command . This command should refresh your complete project and add newly created assets/fonts folder to its directory listing. Now the font can be accessible using fontFamily style.

7. Open index.android.js / index.ios.js file.

8. Import AppRegistry, StyleSheet, Text and View component in your project.

9. Create 3 Text component inside a Parent View in the render’s return block .

10. Now add custom fonts using inline style in each Text component.

11. Add style sheet class for Parent View.

12. Complete source code for index.android.js / index.ios.js file:

Screenshot in Android mobile phone application :

Screenshot in iOS mobile application :

Custom External Text Fonts

13 Comments

  1. Nice tutorial sir, I was looking such type of tutorial.

  2. At first, it doesn’t work for me
    After reinstalling the project it works really well

    Thanks a lot

  3. Thanks Bro…
    its working fine.

  4. Does not work and that package.json stuff is deprecated.

Leave a Reply

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