How to Set Font Weight in React Native

Shubham Vora Feb 02, 2024
  1. Font Weight in React Native
  2. Use Different Fonts in the React Native Project
How to Set Font Weight in React Native

In this article, we will learn to use different fonts with different font weights in React Native.

Font Weight in React Native

The font-weight property may show some problems in the React Native application, so we will use additional font files to replicate the same in the React Native application. To add custom fonts in React Native, we need to download the font files, for example, .ttf files.

After downloading the font files, we need to perform specific steps to use them in our React Native app.

In this article demo, we use the OpenSans font with three variants to show different font-weight, which are OpenSans Regular, OpenSans Bold, and OpenSans Italic.

The steps to add different fonts for different font weights are given below:

  • There are many websites available to download font files. Users can follow the Google fonts website to download the desired fonts.
  • Add the fonts in the fonts folder of the assets directory of the React Native project. If you don’t have a fonts folder in the assets, create a folder named fonts, and tmove the downloaded fonts in the fonts folder.

    Assets Font Setup

    The above image shows the folder structure that should look like after moving all font files to the assets/fonts folder.

  • Create a new file named react-native.config.js in your React Native project. If your project already has this file, you don’t need to create it again; you can use the previously created one.
  • Add the following code to this file.
    module.exports = {
      project: {
    	ios: {},
    	android: {},
      },
      assets: ["./assets/fonts/"],
    };
    
  • For React Native version >= 0.69:

    npx react-native-asset
    

    For React Native version < 0.69:

    npx react-native link
    
  • The useFonts hooks initialize the fonts so we can use them in our project. Firstly, we must import these useFonts hooks from the expo-font, which takes an object in the parameter, and the object’s key defines the font family name, which will be used in the project to set the font.
  • The object’s value is called the require function that binds the downloaded font file to the object key. We can apply the useFonts hooks using the syntax given below:
    // using useFonts hooks
    const [loaded] = useFonts({
    	OpenSansRegular:  require('./assets/fonts/OpenSans-Regular.ttf'),
    	OpenSansBold:  require('./assets/fonts/OpenSans-Bold.ttf'),
    	OpenSansItalic:  require('./assets/fonts/OpenSans-Italic.ttf'),
    });
    

Use Different Fonts in the React Native Project

It is the final step to use the different fonts for different font weights. In the App.js file of our React Native project, we will write the code to use the useFonts hooks.

In the below example, firstly, we imported the required components for our React Native project, and those are StyleSheet to set up the style of our React Native project, Text to write content text, View to set up the project view, useFonts to set the fonts.

The useFonts hook is set up by the previously discussed method. Then, we mentioned some styling for the View component using StyleSheet.

Finally, in the Text components, we set the fontFamily style using the style attribute and give the values from the useFont hook.

import { StyleSheet, Text, View } from 'react-native';
import { useFonts } from 'expo-font';
export default function App(){
    // load fonts
    const [loaded] = useFonts({
        OpenSansRegular: require('./assets/fonts/OpenSans-Regular.ttf'),
        OpenSansBold: require('./assets/fonts/OpenSans-Bold.ttf'),
        OpenSansItalic: require('./assets/fonts/OpenSans-Italic.ttf'),
    });
    if (!loaded) {
        return null;
    }
	// show texts with different fonts
    return (
        <View style={styles.container}>
            <Text style={{ fontFamily: 'OpenSansRegular', fontSize: 30 }}>OpenSans Regular</Text>
            <Text style={{ fontFamily: 'OpenSansBold', fontSize: 30 }}>OpenSans Bold</Text>
            <Text style={{ fontFamily: 'OpenSansItalic', fontSize: 30 }}>OpenSans Italic</Text>
        </View>
    );
}
// style for the component
const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Output:

Font Weight React Native Output

In the above output, users can see three kinds of font weights of the same font.

This article taught us to use different fonts for different font weights. It is very easy, but users must follow the step-by-step process. Users can follow the example to understand the process better.

Author: Shubham Vora
Shubham Vora avatar Shubham Vora avatar

Shubham is a software developer interested in learning and writing about various technologies. He loves to help people by sharing vast knowledge about modern technologies via different platforms such as the DelftStack.com website.

LinkedIn GitHub

Related Article - React Native