In a competitive marketplace, custom fonts can help you stand out from the competition by creating a unique identity for your app.
Table of Contents
Adding custom fonts to React Native has become much easier and more straightforward.
It is fairly easy to add custom fonts to a react native project using the react-native-asset command, however, it can be challenging if you are unfamiliar with react native.
We can find fonts from a variety of sources on the Internet, A popular resource for free and open-source fonts is Google Fonts.
Steps to Add Custom Fonts in React Native App
Create a font directory under assets in your project after downloading the fonts.
The font files should be either in .ttf or .otf format
The font files should be either in .ttf or .otf format
In this project, I have used cabin font. it has been downloaded from google fonts.
project-root-directory/assets/fonts
Create a config file at the root of the project called react-native.config.js. Add the following code to the module.exports.
module.exports = {
project: {
ios:{},
android:{}
},
assets:['./assets/fonts/'],
}After react-native (0.69) was updated, the link command was removed. The font assets should be linked automatically with react-native-asset. If you want to add fonts to your project, run the following command.
npx react-native-assetsAfter running the above command,
for Android,
fonts automatically added in the android/app/src/main/assets/fonts directory
fonts automatically added in the android/app/src/main/assets/fonts directory
for ios,
fonts automatically added to the info.plist
fonts automatically added to the info.plist
After you can apply fonts to text in your project like this
after adding fonts to the project run the project with the below command.
//In ios
cd ios && cd ..
npm run ios
// In android
cd android && ./gradlew clean && cd .. && npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
npm run android