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. Open terminal, go to the project root directory and run Step 1: mkdir assets && mkdir assets/fonts Copy your custom font to the folder. Step 2: assets/fonts Create a file in the root directory with as: Step 3: touch react-native.config.js In file add the below code snippet Step 4: react-native.config.js .exports = { : [ ] } module assets "./assets/fonts" Now, run the below command to link the assets to your react native project: Step 5: npx react-native link To verify if the font is been linked or not, go to folder and check if your font has been added to the directory. android/src/main/assets 🚀 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 Getting started with React Native. < = > Text style {{styles.text}} </ > Text Define styles to use the custom font as: styles = StyleSheet.create({ : { : }, }); const 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 and in the comments below! Twitter Previously published at https://medium.com/@goelaakash79/how-to-add-a-custom-font-to-a-react-native-project-4b5ea13e788e
