Custom Font in React Native

Tram Ho

Today’s article I will share with you how to customize fonts with React Native for both iOS and Android

Name the font

To avoid conditional logic errors in React Native styles, we should rename the font as needed so that it ensures the font will read the same name both iOS and Android.

For example, I am using a font file called “vinchand.ttf”. However, when I opened it in FontBook, I saw that the full name of the font was “vincHand” with a capital H.

To make sure the font works smoothly, I will rename the font to “vincHand.ttf”, because Android will read from the filename and iOS will read from the “full name” property.

Add Font to Assets

Next, add all the fonts we want to the assets/fonts folder in the React Native project’s root directory

Font alignment

Next, we’ll have to tell React Native where we have placed the custom fonts.

  1. Create react-native.config.js in the root directory, then add assets: ['./assets/fonts/']

  1. Run react-native link command

The font’s reference will be added to the Info.plist file on iOS, but on Android it will copy the font file to android/app/src/main/assets/fonts .

You can check by yourself by opening the Info.plist file and searching with the keyword UIAppFonts.

Go to the path “android / app / src / main / assets / fonts” to see that the font has been copied

React Native Styles

After we have the font embedded in the project, using it is too simple, just use the fontFamily property with the font name.

And here is the result:




Thank you for following the article, the article is referenced at:

Share the news now

Source : Viblo