How to use Expo font in react native

Incorporating custom fonts into your React native application can greatly improve its visual appeal and overall user experience. Expo provides a user-friendly set of tools and services that simplify this process. In this step-by-step guide, we will explore how to seamlessly integrate Expo font or adding custom fonts into Expo project.

React Native, when combined with Expo, offers an efficient way to develop mobile applications for both iOS and Android platforms. One of the advantages of using Expo is the ease with which custom fonts can be integrated into React Native projects, thereby enhancing the app’s design and user experience. This article will delve into the process of implementing custom fonts using Expo in React Native applications.

The choice of typography plays a crucial role in shaping the design and user experience of mobile apps. By using custom fonts, developers can ensure brand consistency, improve readability, and set their app apart from others in the market. With the help of React Native and Expo, developers can easily incorporate custom fonts, leading to a more personalized app aesthetic and an enhanced user experience.

Overview steps for adding Expo custom fonts

Install the expo font in expo React native application
Choosing the Expo custom fonts and adding it in assets/fonts folder.
Initializing expo font related code in app.js or _layout.jsx or tsx.
Using the Expo fonts inside the application.

Tutorial on how to used Expo custom fonts

Before diving into the code, make sure your React Native project is set up with Expo. If you’re starting from scratch, create a new Expo project by running expo init YourProjectName.

npx create-expo-app someProject

Step 1: Adding React native custom fonts

Begin by downloading your desired fonts, for instance from Google Fonts. Place all your custom font files (such as .ttf or .otf) in your react native project directory, preferably within a folder named assets/fonts. Ensure that the font files you use are properly licensed for mobile app usage.

Step 2: Install Expo Font Package

Expo provides a dedicated package for managing fonts. If you haven’t done so already, install the Expo font package by executing the following command:

npx expo install expo-font

Step 3: Load the React native Custom fonts

Once you had dowload, add all fonts in assets/fonts, and installed expo-font, let load it in our react native expo project. To load your custom fonts, use the useFonts hook provided by expo-font. Modify your main app file (usually App.js or App.tsx) or first entry component like _layout.tsx as illustrated in the given code example.

In our case we are using Inter-black fonts inside our react native expo project.

import React, { useCallback, useEffect } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import * as SplashScreen from 'expo-splash-screen';
import { useFonts } from 'expo-font';

const App = () => {
  const [fontsLoaded, fontError] = useFonts({
    'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
Inter: require('./assets/fonts/Inter.ttf')
  });

  useEffect(() => {
    SplashScreen.preventAutoHideAsync();

    const handleSplashScreenDismissal = async () => {
      await SplashScreen.hideAsync();
    };

    if (fontsLoaded || fontError) {
      handleSplashScreenDismissal();
    }
  }, [fontsLoaded, fontError]);

  if (!fontsLoaded && !fontError) {
    return null;
  }

  return (
    <View style={styles.container}>
      <Text style={{ fontFamily: 'Inter-Black', fontSize: 30 }}>Inter Black</Text>
      <Text style={{ fontSize: 30 }}>Platform Default</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

The useFonts hook returns an array where the first element is a boolean indicating whether the fonts have been loaded. This replaces the manual state management done previously.

The useFonts is a hook that asynchronously loads the font files and returns a boolean indicating whether the fonts have loaded. The app will display the custom font once it is loaded.

While React native custom fonts are a powerful tool for UI enhancement, it’s essential to handle scenarios where fonts may fail to load. Implementing a fallback font system ensures your app remains usable and maintains good typography. Additionally, consider the performance impact of adding multiple font files and load only the necessary font weights and styles.

We can see tha in above we had used custom font inside the our componenet in inline on Text component.

Here is another example of how to use React native custom fonts in Expo project.

Step 4: Using Custom Fonts Throughout Your App

After successfully loading your custom fonts, you can apply them anywhere in your app by setting the fontFamily style attribute to your loaded font name, just as you would with any other font.

How to used Expo custom font in NativeWind project?

First we need to install the all the required package related to NativeWind in our expo project. To use the Inter-Bold font directly in the class name with NativeWind, you’ll first need to extend your Tailwind CSS configuration to include the Inter font family and set up the appropriate font weight mapping. After that, you can use the custom font class directly in your components. In the tailwind.config.js file add the following code.

In NativeWind instead of using font-family we can used in on className as below.

<Text className="text-lg font-thin">This is Inter-Thin font</Text>
<Text className="text-lg font-light">This is Inter-Light font</Text>

In conclusion
React native with expo is use by so many big companies for their application. Integrating custom fonts in your Expo app can greatly enhance its visual appeal and user experience. By following this step-by-step guide, you can easily download, install, and load custom fonts, such as the popular Inter font family, in your React Native project using Expo. To learn more on expo font and expo related page, please check official expo project.