Fonts not loaded in React Native Expo

Question

(Sorry, English is not may first language)

I load my fonts, but when I try to use them it says that the font is not a Font and I need to use Font.loadAsync

I have load them in APP():

    import * as Font from "expo-font";
    import AppLoading from "expo-app-loading";
    import React, { useState } from "react";
    import { Actions, Router, Scene } from "react-native-router-flux";
    
    export default function App() {
    
      const fetchFonts = () => {
        return Font.loadAsync({
          "Montserrat-Bold": require("./assets/fonts/Montserrat-Bold.ttf"),
          "Montserrat-Medium": require("./assets/fonts/Montserrat-Medium.ttf"),
          "Montserrat-Regular": require("./assets/fonts/Montserrat-Regular.ttf"),
          "Montserrat-SemiBold": require("./assets/fonts/Montserrat-SemiBold.ttf"),
          "MyriadPro-Regular": require("./assets/fonts/MyriadPro-Regular.otf"),
        });
      };
    
      const [fontLoaded, setFontLoaded] = useState(false);
    
      if (!fontLoaded) {
        return (
          <AppLoading
            startAsync={fetchFonts}
            onFinish={(setFontLoaded(true)}
            onError={(console.warn}
            autoHideSplash={false}
          />
        );
      } else {
        return (
          <Router styles={styles.container}>
    ...
          </Router>
        );
      }
    }

I use the fonts in a Style in another screen like this:

      text: {
        textAlign: "center",
        padding: 20,
        fontFamily: "Montserrat-Bold",
      },

The error:

Error on iPhone 8 (Emulator)

fontFamily "Montserrat-Bold" is not a system font and has not been loaded through Font.loadAsync.

- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

- If this is a custom font, be sure to load it with Font.loadAsync.
at node_modules/expo-font/build/Font.js:27:16 in processFontFamily
at [native code]:null in performSyncWorkOnRoot
at node_modules/react-native/Libraries/ReactNative/renderApplication.js:54:4 in renderApplication
at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:117:25 in runnables.appKey.run
at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:213:4 in runApplication
at [native code]:null in callFunctionReturnFlushedQueue

Answer 1

Change your fetchFonts to this

 const fetchFonts = async () => {
        await Font.loadAsync({
          "Montserrat-Bold": require("./assets/fonts/Montserrat-Bold.ttf"),
          "Montserrat-Medium": require("./assets/fonts/Montserrat-Medium.ttf"),
          "Montserrat-Regular": require("./assets/fonts/Montserrat-Regular.ttf"),
          "Montserrat-SemiBold": require("./assets/fonts/Montserrat-SemiBold.ttf"),
          "MyriadPro-Regular": require("./assets/fonts/MyriadPro-Regular.otf"),
        });
      };

and your if/else to this

if (!fontLoaded) {
        return (
          <AppLoading
            startAsync={fetchFonts}
            onFinish={() => setFontLoaded(true)}
            onError={(console.warn}
          />
        );
      } else {
        return (
          <Router styles={styles.container}>
    ...
          </Router>
        );
      }

and also declare your state above the fetchFonts funtion just to make the code clear

---

Another very clean way to loadFonts which I do in all my project is create a folder called hooks where your App.js is located

Then inside hooks folder create a file called useFonts.js

Inside useFonts.js write like this

import * as Font from "expo-font";

export default useFonts = async () => {
   await Font.loadAsync({
      "Montserrat-Bold": require("../assets/fonts/Montserrat-Bold.ttf"),
      "Montserrat-Medium": require("../assets/fonts/Montserrat-Medium.ttf"),
      "Montserrat-Regular": require("../assets/fonts/Montserrat-Regular.ttf"),
      "Montserrat-SemiBold": require("../assets/fonts/Montserrat-SemiBold.ttf"),
      "MyriadPro-Regular": require("../assets/fonts/MyriadPro-Regular.otf"),
    });
};.

Now in your App.js write like this

import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';
import React, { useState } from 'react';
import { Actions, Router, Scene } from 'react-native-router-flux';

import useFonts from './hooks/useFonts';

export default function App() {
  const [IsReady, SetIsReady] = useState(false);

  const LoadFonts = async () => {
    await useFonts();
  };

  if (!IsReady) {
    return (
      <AppLoading
        startAsync={LoadFonts}
        onFinish={() => SetIsReady(true)}
        onError={() => {}}
      />
    );
  }

  return <Router styles={styles.container}>{/* Code Here */}</Router>;
}