Typography is one of the crucial elements in developing a mobile app since a properly selected typeface would enhance text readability, brand itself, and show professionalism while working with it. Although there are some built-in system fonts available for your project in React Native, most likely you will need to create custom fonts in order to make it unique.
Here you will learn how to install custom fonts in your React Native app.
Why Use Custom Fonts?
Using custom fonts will allow you to do the following:
- Create unique branding.
- Make your app look nicer.
- Observe the contents of your app clearly.
- Keep your design uniform across different platforms.
Configure Custom Fonts in Android
Navigate to your Android project and create the following folder structure:
android/
└── app/
└── src/
└── main/
└── assets/
└── fonts/
├── Poppins-Regular.ttf
├── Poppins-Medium.ttf
Configure Custom Fonts in iOS
Step 1: Adding Fonts to Xcode
- Open ios/YourProject.xcworkspace file in Xcode.
- Right-click on your project in the Project Navigator.
- Select Add Files to “YourProject”.
- Choose your font files.
- Enable Copy items if needed.
- Click Add.
Step 2: Edit Info.plist
Open ios/YourProject/Info.plist and add the following entry:
<key>UIAppFonts</key>
<array>
<string>Poppins-Regular.ttf</string>
<string>Poppins-Medium.ttf</string>
</array>Step 3: Running Command
cd ios pod installRecommended Approach
If you have installed version 0.60+ of React Native, follow the instructions below:
- Create assets/fonts.
- Install fonts in your assets/fonts folder.
- Add react-native.config.js file.
module.exports = {
assets: ['./assets/fonts'],
};Example
import React from 'react';
import { StyleSheet, View } from 'react-native';
const APP = () => {
return (
<View style={styles.main}>
<Text
style={{fontSize:18,color:"black",fontFamily:"Poppins-Regular"}}>Welcome
To</Text>
<Text style={{fontSize:15,color:"black",fontFamily:"Poppins-Medium"}}>React
Native APP</Text>
</View>
)};
const styles = StyleSheet.create({
main: {
padding: 10,
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
})
export default APP;Conclusion
Custom fonts in React Native offer an easy yet highly efficient way to improve both your application and brand design. It is important to put font files in the assets directory, configure assets for React Native, link them properly, and use the fontFamily attribute to build a nice mobile UI.
Also, a typography approach can be considered while using consistent fonts in your app.
FAQ
1. What file formats can be used with React Native?
The file formats .ttf (True Type Font) and .otf (Open Type Font) are supported by React Native.
2. Is any additional library needed for custom font usage?
No, it is possible to apply custom fonts through the linking of assets in React Native.
3. Why is my custom font not displaying?
There may be several causes including wrong font names, lack of asset linking, or forgetting to rebuild the application.
4. Are Google fonts compatible with React Native?
Sure, all you need to do is download your desired fonts from Google Fonts and put their .ttf files in the assets folder.
5. Do custom fonts reduce the performance of my application?
The use of too many custom fonts will slightly increase your application size, so it is recommended that you only include the variants of fonts your application actually needs.
