Before you go, check out these stories!

Hackernoon logoHow to Add a Custom Font to a React Native Project by@goelaakash79

How to Add a Custom Font to a React Native Project

Author profile picture

@goelaakash79Aakash Goel

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


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

touch react-native.config.js

Step 4: In

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.

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


Join Hacker Noon

Create your free account to unlock your custom reading experience.