Custom Fonts in React Native
Adding Custom Fonts in React Native
In React Native project src directory, we should create an assets directory. We will have a directory for each asset (SVG, Fonts, etc.). Therefore, create a fonts directory and paste the fonts that you downloaded. In the React Native project's root, create a file called react-native.
Font plays a vital role in building an adequate user interface for an application. Here are some of the issues that may face while implementing custom fonts in React Native:
- Fonts are not functional on Android
- Fonts are not functional because of already installed vector icons.
Creating a New Application
To initialize a React Native Project, paste the following into our terminal:
Adding font files to the assets/fonts folder
Please create a new folder with the name assets at the root of our project and create a sub-directory with the name fonts and all our font files.
Creating Configuration file
Create a react-native.config.js file at the project's root and add this code to it.
Linking fonts files to the app
Run the command as npxreact-native link
Re-run the app
To re-run the application, close it and re-run the application.
To use the fonts that were created, use I am a text with a font-family
Fonts are not functional on Android.
There can be many reasons for the fonts not working on Android:
- Some fonts don’t work with the same font-family name format. Try changing the font-family name from NutinoSans-Bold to nutinosans_bold on Android. We can also define font family based on the platform.
- Sometimes font doesn't work on Android because of the font weight. Try to remove it.
- If the fonts are still not working, we need to remove the old font files from the assets/fonts folder and replace them with the new files with the names in snake_case like ogbrother_medium and nutinosans_bold. Try linking these files.
- Sometimes fonts don't work with font-weight: "bold." Try to replace this with a font value like font-weight: "700".