Typography is an essential element in any mobile application. It influences the user’s perspective towards the overall user experience of the app. It plays a key role in making a good first impression. Typography generally refers to the way of displaying and arranging the text that makes it look appealing and readable. The parameters taken into consideration are the size, layout, and Font style. Here, Font style refers to the Font Family. Choosing a unique and suitable Font amplifies the overall beauty of an app, creating a pleasing user interface.

Text is an essential element that imparts the information to the users. Making them look clear and readable is a vital point when it comes to user experience. The text reflects the communication medium between the app and its users. Conveying information and messages to the user based are all done using Text. This, the text must appear attractive, unique, and readable for the end-users.

In this tutorial, we are going to learn how to add custom fonts to the React Native environment for the Android Platform. The tutorial is made to address the solution for the latest versions of React Native (> 60.0). The tutorial is simple and easy to understand. We are going to make use of Google Fonts to download the required fonts which we are going to integrate into our project.

Google Fonts repository provides a wide variety of unique fonts. The idea is to download some of the most uniquely designed fonts and add them to the React Native project. It will also involve linking resources to the native Android environment and adding fonts to the React Native screen template to display the font.

So, let’s get started!

 

Creating a new React Native project

First, we are going to create a new React Native project using React Native CLI. Before creating the React Native project, we must make the necessary installations in our system. Here, we are going to use React Native CLI. We can follow the installation setup guide from the official documentation. After everything is set up properly, we can create a new React Native boilerplate project using the React Native CLI. For that, we need to go to the repository in our local system where our project is to be created and execute the following command in the terminal:

react-native init customFont

This command downloads all the pre-requisites for a basic React Native boilerplate project. After the project setup is complete. We can open the project in any Code editor such as VScode and open the terminal on it.

Now to run the project in an emulator or device, we need to run the following command in the project terminal:

react-native run-android

Note that, the emulator or actual device must be connected so that this command executes properly.

After the proper build, we will get the following result in the emulator or device screen:

 

Download the Custom Fonts

Since we are going to install custom fonts to our React Native project, we need to get those fonts first. We can simply download the font files from Google Fonts. Google Fonts provides a wide selection of varieties of fonts as shown in the screenshot below:

To download the font, we simply need to select the font we want. It results in the font detail window pop-up on the screen. Then, we can simply click on the “+ Download family” button to download the required font files. The downloaded file will contain a full package of the font with different font-weight specifications. Usually, the font files will be of extension (.tff). We can use the font file with a suitable style in our project.

For this project, we are going to download two distinct Font Families:

These fonts are chosen because they have a unique font design that can be easily seen on the screen. This will help us to easily distinguish between the default React Native font and custom fonts.

The fonts will be downloaded in a compressed (zip) form. We need to unzip the folder to get the font files.

Now, in our React Native project, we need to create a ./assets folder in the root project folder. Inside the ./assets folders, we need to create another folder called the ./fonts folder.

Next, we need to copy the required font files and paste them inside the ./assets/fonts folder of our React Native project.

The folder structure is shown in the screenshot below:

 

Linking the Assets to Native Android

Now, we need to link assets to the native environment. Since we are only addressing the Android platform in this tutorial, we are going to link the assets to the native Android environment. For that, we need to create a file called react-native.config.js in the root React Native project folder. Inside the file, we need to write the code to export the assets. The code is provided in the code snippet below:

module.exports = {
assets: [“./assets/fonts”]
}

Now, we can link the font files inside the ./assets/fonts folder to the android environment by executing the following command in the project terminal:

react-native link

This will result in linking assets to the android project as demonstrated in the screenshot below:

After the successful linking, we can check if the assets are linked to the android project by navigating to ./android/app/src/main/assets/fonts directory:

As we can see, the assets/fonts folder with required fonts files appear in the android project ./main folder. Hence, this proves that the font assets are linked to our native configs now.

 

Adding Custom Fonts to Template

Since the fonts are now linked and available for use in our React Native project, we can add them to our template. In the App.js file of our project, we have the default React Native template code as shown in the code snippet below:

const App = () => {
return (
<>
<StatusBar barStyle=”dark-content” />
<SafeAreaView>
<ScrollView
contentInsetAdjustmentBehavior=”automatic”
style={styles.scrollView}>
<Header />
{global.HermesInternal == null ? null : (
<View style={styles.engine}>
<Text style={styles.footer}>Engine: Hermes</Text>
</View>
)}
<View style={styles.body}>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Step One</Text>
<Text style={styles.sectionDescription}>
Edit <Text style={styles.highlight}>App.js</Text> to change this
screen and then come back to see your edits.
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>See Your Changes</Text>
<Text style={styles.sectionDescription}>
<ReloadInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Debug</Text>
<Text style={styles.sectionDescription}>
<DebugInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Learn More</Text>
<Text style={styles.sectionDescription}>
Read the docs to discover what to do next:
</Text>
</View>
<LearnMoreLinks />
</View>
</ScrollView>
</SafeAreaView>
</>
);
};
CSS:
const styles = StyleSheet.create({
scrollView: {
backgroundColor: Colors.lighter,
},
engine: {
position: ‘absolute’,
right: 0,
},
body: {
backgroundColor: Colors.white,
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: ‘600’,
color: Colors.black,
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: ‘400’,
color: Colors.dark,
},
highlight: {
fontWeight: ‘700’,
},
footer: {
color: Colors.dark,
fontSize: 12,
fontWeight: ‘600’,
padding: 4,
paddingRight: 12,
textAlign: ‘right’,
},
});

 

Now, we are going to make some changes to the CSS stylesheet. We are going to add our custom font by using the fontFamily property to some textual sections of the template as shown in the code snippet below:

sectionTitle: {
fontSize: 24,
fontWeight: ‘600’,
color: Colors.black,
fontFamily : “DancingScript-Bold”
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: ‘400’,
color: Colors.dark,
fontFamily : “Langar-Regular”
},

Here, we have added our Dancing Script font with bold font-weight and Langar font with regular font-weight. Now, to see the changes in the app interface, we need to rebuild the app by executing the following command in our project terminal:

react-native run-android

Hence, the result is shown in the emulator screenshots below:

 

As we compare both the images, the font in the right image has changed as compared to the default font in the left image. We can see easily notice the unique font design provided by the two fonts that we downloaded.

Finally, we have successfully integrated the custom fonts in the React Native project for the Android platform.

 

Conclusion

The tutorial was indeed short and easy. The stepwise guide provided in this tutorial will help any beginner in React Native to integrate custom fonts to the React Native ecosystem easily. While adding the custom Font, we need to make sure that the font matches our overall app theme. Otherwise, it may create a confusing user experience. We don’t want that to happen so make sure to pick the right one. Choosing an appropriate font will boost the beauty of the user interface as well as create a pleasing user experience.

Remember that the integration process for the prior React Native versions is somewhat different where we need to add the additional script on package.json. But, for the latest versions of React Native, the implementation steps provided in this tutorial is the accurate one. Make sure to try out new font styles. You can even choose to download fonts from other font repositories. The integration steps remain the same.