Adding Custom google font in React Native Expo App

Have a google font you want to use in your React Native Expo App? I will explain how you can easily add custom fonts to Expo app..

There are two ways of adding custom fonts either by downloading the fonts or using @expo-google-fonts to install the font you want..

I will be talking about using @expo-google-fonts in this article.

Step 1: Decide the font you want to use, I will be using Montserrat in this tutorial because it’s my favourite font, when you decide the font you will be using. Go to google fonts and find the font you want to use then type @expo-google-fonts/the-name-of-the-font for example I am using Montserrat it would be @expo-google-fonts/montserrat or if I chose to use another font example League Spartan it will be @expo-google-fonts/spartan. You can check https://www.npmjs.com/package to know the exact name to use for your desired font.

Step 2: After you have decided the name of font, go to your React Native Expo project and run npm install @expo-google-fonts/montserrat or yarn install whichever one you are using. The google font will be installed. Go to your App.js and import the font like below:

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";

import {
  useFonts,
  Montserrat_100Thin,
  Montserrat_200ExtraLight,
  Montserrat_300Light,
  Montserrat_400Regular,
  Montserrat_500Medium,
  Montserrat_600SemiBold,
  Montserrat_700Bold,
  Montserrat_800ExtraBold,
  Montserrat_900Black,
} from "@expo-google-fonts/montserrat";

export default function App() {
  let [fontsLoaded] = useFonts({
    Montserrat_100Thin,
    Montserrat_200ExtraLight,
    Montserrat_300Light,
    Montserrat_400Regular,
    Montserrat_500Medium,
    Montserrat_600SemiBold,
    Montserrat_700Bold,
    Montserrat_800ExtraBold,
    Montserrat_900Black,
  });

  if (!fontsLoaded) {
    return <View></View>;
  } else {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <StatusBar style="auto" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

With the above done, your Google Font is ready to be used in your Expo App.

fontFamily: "Montserrat_600SemiBold"