expo: fontFamily "material" is not a system font and has not been loaded through Font.loadAsynch.

I spent a few frustrating hours after upgrading from Expo 39 to Expo 40 on this one. I had initially resolved the issue by installing expo-font separately and adding a postinstall script to remove the ./node_modules/expo/node_modules/expo-font folder, as suggested in a forum post linked above.

However, I finally solved the issue without the postinstall workaround after I noticed this warning:

Some of your project's dependencies are not compatible with currently installed expo package version:
 - expo-font - expected version range: ~8.4.0 - actual version installed: ^9.0.0
Your project may not work correctly until you install the correct versions of the packages.
To install the correct versions of these packages, please run: expo install [package-name ...]

npm install expo-font had added v9.0.0 and this was causing Expo to install a second font package, which seemed to cause a conflict. Deleting my node_modules folder and installing expo-font@~8.4.0 resolved the problem and the need for the postinstall script was no longer necessary. Presumably, I could have avoided this if I had used expo install expo-font in the first place.

–

TL;DR: It seems like there are various things that can cause the “font has not been loaded” error message. Make sure you have the right version of expo-font installed for your version of Expo if other solutions here aren’t working.

I have been having the exact same problem. Tried all solutions from all forums. Nothing works.

rm -rf node_modules
npm cache clean --force
rm -rf .expo
rm package-lock.json
npm install

this work for me

I tried everything. Absolutely everything. SDF 39.0.0., Android 10, React Hooks, followed official examples, I’ve lost hours with this crap. This is appalling. I’ve deleted node_modules, expo, package-lock.json, npm cache, reinstalled npm packages, expo-font, also @use-expo/font, absolutely everything. Async functions, with and/or without useEffect, no luck.

I got this problem from a version mismatch between expo and expo-font caused by using yarn to download expo-font. To fix it, I just ran yarn remove expo-font and then ran expo install expo-font. Using expo to install rather than yarn directly made it so that expo automatically downloaded a matching version which worked.

I have learned the lesson of using expo install instead of yarn add for my future package downloads.

That raises the question, why is the latest version of expo-font incompatible with the latest version of expo?

How I solved it:

import React from 'react';
import { StyleSheet, View, ScrollView, Alert } from 'react-native';
import { useFonts } from '@use-expo/font';
import { AppLoading } from 'expo';


export default function App() {
  let [fontsLoaded] = useFonts({
    'Barlow-Light': require('./assets/fonts/Barlow-Light.ttf'),
    'Barlow-Regular': require('./assets/fonts/Barlow-Regular.ttf'),
    'Barlow-Medium': require('./assets/fonts/Barlow-Medium.ttf'),
    'Barlow-SemiBold': require('./assets/fonts/Barlow-SemiBold.ttf'),
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
  return (
    <ScrollView>
      <View style={styles.container}>
        <BodyOne style={{...styles.textActive,...styles.marginVertical}}>My text</BodyOne>
      </View>
    </ScrollView>
  );
}}

This same issue has been posted around our github and forums a few times, mostly with the solutions above being the fix, or installing the expo-font package.

If you can’t provide a reproducible demo, then I think the best course of action is to look at those other threads and try their fixes in your own project

@kevinvugts try removing expo cache from your home folder. In my system under ~/.cache/expo. It seems it fixed the problem to me

@kevinvugts just remove and regenerate your lock file. In our case it was package-lock.json. After that this issue is gone.

Hi guys, it worked for me,

• I went to the folder of Vector Icons (./node_modules/@expo/vector/icons/build/vendor/react-native-vector-icons/Fonts/[font].tff
• Copied that font to my asset folder (in my case was Ionicons)
• Then with loadAsync, I’ve loaded as if it was a personal folder.

it was the only way that I could figure it out.

async function loadFonts() {
  await Font.loadAsync({
    'Ionicons': require('./src/assets/fonts/Ionicons.ttf')
  });

Update: Created an issue, etc, and got it fixed with a method not mentioned above. Details in this issue: https://github.com/expo/expo/issues/11333

Getting the rephrased error “Unrecognized font family: ‘FONTFAMILYNAME’” after upgrading from Expo 38 to Expo 40. Commenting here since it’s one of the few non-closed threads on the topic.

Definitely feeling the frustration. A list of the things I’ve tried to no avail:

• Clearing node_modules, .expo, yarn.lock, npm cache, yarn cache (clean), reinstalling mobile apps
• expo install expo-font
• expo upgrade (not to upgrade, but to make sure packages are correct versions)
• The sourceExts solution here: https://github.com/expo/expo/issues/7565
• The postinstall removal script here: https://forums.expo.io/t/sdk-37-unrecognized-font-family/35201/3
• All above solutions ofc
• Removing all unused dependencies in case something is causing a conflict
• Making sure that I’m indeed calling Font.loadAsync from AppLoading (I am, though console logs have inexpicably stopped showing up as well. Had to change things to console.errors to see anything)
• Replacing Font.loadAsync with the hook useFonts
• Upgrading all the non-expo-managed packages that had options available

I’m at something of a loss as to what to try next, or how to diagnose the problem. I was just trying to upgrade while in the process of handling iOS 14 date pickers, but now I’m mired in what feels like a much bigger mess. I’ll try to make a small reproducible example.

Also, potentially dumb question: While debugging this, should I use expo start -c? Because that’s what I’ve been doing, but I’m not sure it’s necessary (and it’s time consuming).

Hey guys, I encountered this problem while using yarn workspaces and just wanted to share the experience of how I solved this.

Basically the package.json file in each subproject had a different value for their “expo” (“38.0.2”/“39.0.4” ), and “react-native”(“…sdk-38.0.2.tar.gz”/“…sdk-39.0.4.tar.gz”) fields, which was likely a result of a collaborator updating separately.

This resulted in my yarn lockfile resolving expo installed packages to duplicate values, like expo-font@~8.2.1 & expo-font@~8.3.0 both showing up, and this occurs for most other “expo-…” packages too.

In my case, editing package.json in each of the subprojects to have the same values for expo and react-native, deleting the lockfile & node_modules, and reinstalling packages solved the problem.

Hope this helps someone else out there with the same headache. 😃

hi all, i got the strange error … the font is already loaded as i can see the font changes on screen. however i still got the error is not a system font and has not been loaded through Font.loadAsync…

------ code ---- import React,{useEffect,useState} from ‘react’; import * as eva from ‘@eva-design/eva’; import { ApplicationProvider,IconRegistry} from ‘@ui-kitten/components’; import { useFonts } from ‘@use-expo/font’; import { AppLoading } from “expo”; import { EvaIconsPack } from ‘@ui-kitten/eva-icons’; import Themes from ‘./customTheme_2’; import { default as mapping } from ‘./mapping.json’; import { Provider } from ‘react-redux’; import store from ‘./redux/store’; import Index from ‘./src/components/index’;

export default function App () {

const [SelectedTheme, SetSelectedTheme] = useState(Themes.light);

let [fontsLoaded] = useFonts({ ‘Montserrat-Regular’: require(‘./assets/fonts/NunitoSans/NunitoSans-Regular.ttf’), });

return ( !fontsLoaded? <AppLoading /> : <Provider store={store}> <IconRegistry icons={EvaIconsPack} /> <ApplicationProvider {…eva} theme={{ …eva.dark, …SelectedTheme }} customMapping={mapping}> <Index /> </ApplicationProvider> </Provider> ) }

Same issue, upgrading from SDK 36 to 37. All working fine on 36, no longer working on 37. Tried all above suggestions (already tried before reading this) and no luck. Seems expo-font is just not loading fonts.