How to Add Custom Fonts in React Native

When designing a mobile app, using custom fonts can enhance the user interface and overall experience. React Native makes it straightforward to integrate custom fonts into your project. This guide will walk you through adding custom fonts for both Android and iOS platforms.

Step 1: Add Your Fonts to the Project

Organize Fonts in Your Project: First, place your custom font files (e.g., .ttf or .otf files) in the assets folder within your project. Here’s an example structure:

project-root/
└── src/
    └── assets/
        └── Font/
            ├── MyCustomFont-Regular.ttf
            ├── MyCustomFont-Bold.ttf
            └── MyCustomFont-Italic.ttf

Step 2: Create `react-native-config.js`

Next, create a configuration file to instruct React Native where to find your font assets.

Create the File: At the root of your project, create a new file called react-native-config.js.
Configure the File: Add the following content to the file:

module.exports = {
    project: {
        ios: {},
        android: {},
    },
    assets: ['./src/assets/Font'],  // Path to your fonts
}

This configuration tells React Native to look for fonts in the assets/Font directory for both iOS and Android.

Step 3: Link the Fonts

Now, you need to link the fonts to your React Native project.

Run the Command to Link Fonts: In your terminal, run the following command:

npx react-native-asset

This command will link your custom fonts to the iOS and Android configurations automatically.

Step 4: Using the Fonts in Your App

After linking the fonts, you can now use them in your app by specifying the font family in your styles.
import { StyleSheet, Text, View } from 'react-native';
const App = () => {
   return (
       <View>
           <Text style={styles.customFontText}>This text uses a custom font!</Text>
       </View>
   );
};

const styles = StyleSheet.create({
   customFontText: {
       fontFamily: 'MyCustomFont-Regular',  // Font family name
       fontSize: 18,
   },
});

export default App;

Make sure the fontFamily value matches the font file name, excluding the file extension (.ttf or .otf).

Conclusion

Adding custom fonts in React Native enhances the visual design of your app, helping to match your branding and design language. With just a few steps, you can easily integrate fonts into both Android and iOS projects, offering a polished and cohesive look across platforms.

Now your custom fonts are set up and ready to use in your app!

SeeB4Coding