How to Add a Custom Font to a React Native Project

I just started learning React Native and I have to admit that, it’s super easy to start with and hot-reloading makes it amazing to develop and reload the application in no time.

But is that all? A big NO.

Being a UI designer, fonts matter a lot to me and the custom fonts play an important role when it comes to building a decent looking user interface.

How to Add Custom Fonts

Today, I’ll show you how easy it is to add and use custom fonts in your React Native project.

Step 1: Open terminal, go to the project root directory and run

mkdir assets && mkdir assets/fonts

Step 2: Copy your custom font to the

assets/fonts

folder.

Step 3: Create a file in the root directory with as:

touch react-native.config.js

Step 4: In

react-native.config.js

file add the below code snippet

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

Step 5: Now, run the below command to link the assets to your react native project:

npx react-native link

To verify if the font is been linked or not, go to android/src/main/assets folder and check if your font has been added to the directory.

Using a custom font 🚀

Suppose below is the Text for which we want to use our custom font. Now let’s give it a style

<Text style={{styles.text}}>
    Getting started with React Native.
</Text>

Define styles to use the custom font as:

const styles = StyleSheet.create({
    text: {
        fontFamily: 'YOUR_FONT_FILE_NAME'
    },
});

And we are done! Enjoy the styling.

This is my first-ever tutorial, so pardon me for being boring and please let me know your suggestions on Twitter and in the comments below!

Previously published at https://medium.com/@goelaakash79/how-to-add-a-custom-font-to-a-react-native-project-4b5ea13e788e