How To Add Custom Fonts In React Native 0.60+ ?

Hello friends, how are you all?
I hope you all are doing good.
In this post, I am going to tell you how you can Add Custom Fonts In A React Native App.
So, without wasting any time let's start with it.
first of all you need to create a blank react native project.
npx react-native init customFonts
Go to project directory.
cd customFonts
After that you need to create a assets folder in root directory and create fonts folder inside that folder. You can better understand by following picture.
After that download fonts which you want to use for your app. I have download Ubuntu fonts.
Please assure that fonts format must v .ttf.
Now place that fonts inside that fonts folder. Check following image for better understanding.
After that you have to create a new file named as react-native.config.js. Open it and paste the below code.
module.exports = {
project: {
    ios: {},
    android: {},
},
assets: ['./assets/fonts']
};
For better understanding see screenshot next to this line.
After this, In project root directory, run following command in terminal to link all the assets for both iOS and Android.
npx react-native link
So, all the fonts we have now linked to the both platforms.
Run the app using this command.
npx react-native run ios (mac only)
npx react-native run android
Now you can see your app in simulators/ or device(if attached).
After that replace following code in App.js to see the effect of fontFamily.
import React, {Component} from 'react';
import {SafeAreaView, Text} from 'react-native';
export default class App extends Component {
  render() {
    return (
      <SafeAreaView
        style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text style={{fontFamily: 'Ubuntu-Light', fontSize: 20}}>
          I Am Ubuntu-Light Font
        </Text>
        <Text style={{fontFamily: 'Ubuntu-Regular', fontSize: 20}}>
          I Am Ubuntu-Regular Font
        </Text>
        <Text style={{fontFamily: 'Ubuntu-Medium', fontSize: 20}}>
          I Am Ubuntu-Medium Font
        </Text>
        <Text style={{fontFamily: 'Ubuntu-Bold', fontSize: 20}}>
          I Am Ubuntu-Bold Font
        </Text>
        <Text style={{fontFamily: 'Ubuntu-Italic', fontSize: 20}}>
          I Am Ubuntu-Italic Font
        </Text>
      </SafeAreaView>
    );
  }
}
Save the app.js by command + S.
You will see your Custom Fonts are working and app is showing in the simulators (or devices). Output images are attached and link to the video of the project's coding as given below.

I hope you like the article regarding Custom Fonts In React Native. This is how you can add them in the React Native app for Android and iOS.
If you have any questions or you want to get a tutorial on some topic, you can comment below.
There will be more posts coming soon. Stay tuned! Bye. 🙂

Post a Comment

0 Comments