React Native Publishing an Android App

Do you need custom fonts for your React Native app? Here you go, follow few steps and you are ready to use your new font.

We will be making use of Montserrat font to import as custom font in our app Git Link : https://github.com/JulietaUla/Montserrat/tree/master/fonts/ttf

Step 1: Download the font file that you need. For example am using “Montserrat-Regular.tff” file.

Step 2: If you wish you can rename the file else keep it the same and make sure it does not have any spaces in the name.

Step 3: Create “assets/fonts” folder in the root folder of our app and copy the font file to that folder.

Add Custom fonts to your React Native (Ios & Android) app

Step 4: Now run “react-native link”. This will copy the font to the app. For android it will be copied to “android > app > src > main > assets > fonts” folder. For Ios the font name will be added to info.plist file in ios > your_app_name > Info.plist

Add Custom fonts to your React Native (Ios & Android) app
Custom font added for Android
Add Custom fonts to your React Native (Ios & Android) app
Custom fonts added for Ios

Step 5: Now use the same name as given for the file name in the stylesheet.

Add Custom fonts to your React Native (Ios & Android) app
For font ‘montserrat’
Add Custom fonts to your React Native (Ios & Android) app
For font ‘montserrat-medium

Step 6: Deploy the app again by running the command react-native run-ios (for Ios) and react-native run-android (For Android). You should be seeing the font changes on the applied view.

Hope you were able to add custom fonts to your app.