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

How to Add a Custom Font to a React Native Project is easy to start with and hot-reloading makes it amazing to develop and reload the application in no time. I’ll show you how easy it is to add and use custom fonts in your React Native project. I'm 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. This is my first-ever tutorial, so pardon me for being boring!
image
Aakash Goel Hacker Noon profile picture

Aakash 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

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.

image

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

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.