Why isn't my Font.LoadAsync working?

SDK Version: ~41.0.1
Platforms: android/ios

I’m trying to load a custom font using Font.loadAsync and AppLoading, I’ve followed all the docs and tutorials but it’s not working and I’m lost as to why. In App.js:

  const [ready, setReady] = useState(false);

const loadFonts = () => {
    return Font.loadAsync({
      "space-mono": require("./assets/fonts/SpaceMono-Regular.ttf"),
    });
  };

 if (!ready) {
    return (
      <AppLoading
        startAsync={prepare}
        onFinish={() => {
          setReady(true);
        }}
        onError={console.warn}
      />
    );
  } else {
    return (
      <UserContext.Provider value={userContext}>
        <HighContrastContext.Provider value={highContrastContext}>
          <SafeAreaProvider>
            <StatusBar />
            <Navigation />
          </SafeAreaProvider>
        </HighContrastContext.Provider>
      </UserContext.Provider>
    );
  }
}

And the error I’m getting:

fontFamily "space-mono" 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/node_modules/expo-font/build/Font.js:27:16 in processFontFamily
at [native code]:null in performSyncWorkOnRoot
at [native code]:null in dispatchAction
at screens/DashboardScreen.js:51:14 in wait.then$argument_0
at [native code]:null in flushedQueue
at [native code]:null in callFunctionReturnFlushedQueue

Any advice would be really helpful

Solved by running expo upgrade :blush:

1 Like

Glad you got things sorted, @hannah.lacey. For future reference, when you share code make sure that all the relevant code is viewable/accessible. (For example, the prepare function you call in AppLoading is not present)

Cheers,
Adam

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.