How to add a custom fonts in react native

Adding custom fonts to your React Native project can enhance the visual appeal of your application. Here’s a step-by-step guide on how to add custom fonts to your React Native app.

Step 1: Obtain the Font Files

First, you need the font files in either .ttf or .otf format. You can download these from Google Fonts or any other font repository.

Step 2: Prepare the Font Files

Rename your font files following this format: YourFontName-Bold.ttf. This helps in managing multiple font styles (Bold, Italic, Regular, etc.).

Step 3: Add Fonts to Your Project

Create a folder named fonts inside the src/assets/fonts directory and place your renamed font files there. The structure should look like this:

your-project/
|-- src/
|   |-- assets/
|       |-- fonts/
|           |-- YourFontName-Bold.ttf
|           |-- YourFontName-Medium.ttf
|           ...

Step 4: Configure React Native to Use the Fonts
Create a configuration file named react-native.config.js in the root directory of your project and add the following code:

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./src/assets/fonts'],
};

Ensure that the path specified in the assets array is correct. In this case, it's ./src/assets/fonts.

Step 5: Create a Custom Font Configuration File

To manage your custom fonts efficiently, create a folder named config inside your src directory. Inside this folder, create a file named customFont.js and add the following code:

export const FONT_FAMILY = {
  YOUR_FONT_NAME_BOLD: 'YourFontName-Bold',
  YOUR_FONT_NAME_MEDIUM: 'YourFontName-Medium',
  // Add other font styles here
};

Replace YOUR_FONT_NAME_BOLD and YOUR_FONT_NAME_MEDIUM with appropriate names for your fonts.

Step 6: Link the Fonts
To link the newly added font assets, run the following command in your terminal:

npx react-native-asset

This command will link your fonts to the project. You should see a confirmation in the terminal indicating that the fonts have been successfully linked.

You’ll notice that new files where added inside the “ios” and “android” folders of your project:

Under ios you’ll now have a “link-assets-manifest.json” file.
Under android → app → source → main → assets → fonts you’ll now have a copy of all of your fonts.

Step 7: Use the Fonts in Your Components

Now that the fonts are linked, you can use them in your React Native components. Import the FONT_FAMILY from your customFont.js file and apply the fonts to your Text components like so:

import React from 'react';
import { Text, StyleSheet, View } from 'react-native';
import { FONT_FAMILY } from './src/config/customFont';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.boldText}>This is Bold Text</Text>
      <Text style={styles.mediumText}>This is Medium Text</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  boldText: {
    fontFamily: FONT_FAMILY.YOUR_FONT_NAME_BOLD,
    fontSize: 20,
  },
  mediumText: {
    fontFamily: FONT_FAMILY.YOUR_FONT_NAME_MEDIUM,
    fontSize: 20,
  },
});

export default App;

Here, replace YOUR_FONT_NAME_BOLD and YOUR_FONT_NAME_MEDIUM with the actual font names defined in your customFont.js file.

Conclusion

By following these steps, you can easily add and use custom fonts in your React Native project. Custom fonts can significantly enhance the look and feel of your app, providing a unique and engaging user experience.