React Native Expo - Custom Fonts Not Loading With Font.loadAsync

Question

I'm up to date on the latest Expo version but for some reason, I can not get a simple custom font going. Here is a fresh project I set up attempting to get a custom font installed.

import React, { useState } from 'react';
import { Text, View } from 'react-native';
import AppLoading from 'expo-app-loading';
import * as Font from 'expo-font';

const fetchFonts = () =>
  Font.loadAsync({
    'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
  });

export default (props) => {
  const [dataLoaded, setDataLoaded] = useState(false);

  if (!dataLoaded) {
    return (
      <AppLoading
        startAsync={fetchFonts}
        onFinish={() => setDataLoaded(true)}
        onError={(err) => console.log(err)}
      />
    );
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontFamily: 'Inter-Black', fontSize: 40 }}>
        Inter Black
      </Text>
      <Text style={{ fontSize: 40 }}>Platform Default</Text>
    </View>
  );
};

This is what I get in the console:

fontFamily "Inter-Black" 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 [native code]:null in dispatchAction
at App.js:19:37 in AppLoading.props.onFinish
at node_modules/expo-app-loading/build/AppLoading.js:41:12 in startLoadingAppResourcesAsync
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue

Answer 1

You have to await the loading fucntion

const fetchFonts = async () =>
  await Font.loadAsync({
    'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
  });

Also, instead of this, try creating a custom hook to Load fonts. Check this answer.

You can do it somenthing like this

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({
    'Inter-Black': require('./assets/fonts/Inter-Black.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 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 <View styles={styles.container}>{/* Code Here */}</View>;
}

Answer 2

1. Add font resource to project folder exp assets/fonts

2. create variable fonts exp customFonts

3. Import on App.js like this

   import AppLoading from 'expo-app-loading';
   import { useFonts } from 'expo-font';
   let customFonts = {
     'Poppins-Black': require('./assets/fonts/Poppins-Black.ttf')
   };
   
   const App = () => {
     const [isLoaded] = useFonts(customFonts);
     if (!isLoaded) {
       return <AppLoading />;
     }
       return <RootApp />;
   }