fontFamily "WorkSans_300Light" is not a system font and has not been loaded through Font.loadAsync.

[chirag773]

fontFamily "WorkSans_300Light" 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.

[jeff-gouveia]

I had the same issue even using the example, the code:

import { StatusBar } from 'expo-status-bar'
import { AppLoading } from 'expo'
import { useFonts, Poppins_400Regular, Poppins_600SemiBold } from '@expo-google-fonts/poppins'
import { Archivo_400Regular, Archivo_700Bold } from '@expo-google-fonts/archivo'
import { Text, View } from 'react-native'
import React from 'react'

export default function App() {
  let [fontsLoaded] = useFonts([
    Poppins_400Regular,
    Poppins_600SemiBold,
    Archivo_400Regular,
    Archivo_700Bold,
  ])

  if (!fontsLoaded) {
    return <AppLoading />
  }

  return (
    <>
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ fontFamily: 'Archivo_700Bold', fontSize: 30 }}>Hello World</Text>
      </View>
      <StatusBar style="auto" />
    </>
  )
}

[zdivozzo]

I was having this same issue and just fixed it following advice from this thread: expo/expo#5507

Seems like multiple versions of expo-font can get installed and mess everything up. I ran:

rm -rf ./node_modules/expo/node_modules/expo-font/

And it works now. Hopefully it works for you!

[soullivaneuh]

I have this issue since upgrading to Expo SDK v40.

@zdivozzo I tried your hack and it indeed solve the problem. So I tried this:

❯ find node_modules -type d -name expo-font
node_modules/expo-font
node_modules/expo/node_modules/expo-font

Indeed, two expo-font packages are food. Weird.

The "exotic" part of my configuration is I used an internal package containing my common component. Here is its package.json file:

{
  "name": "@company/apps-components",
  "version": "0.0.0-dev",
  "description": "company apps' common components.",
  "main": "node_modules/expo/AppEntry.js",
  "types": "dist/index.d.ts",
  "react-native": "src/index.ts",
  "files": [
    "dist",
    "src/components",
    "src/utils",
    "src/index.ts"
  ],
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "storybook": "start-storybook -h 0.0.0.0 -p 7007",
    "build": "rm -rf dist && tsc",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "@expo-google-fonts/lato": "^0.1.0",
    "@expo-google-fonts/poppins": "^0.1.0",
    "expo-app-loading": "^1.0.1",
    "expo-font": "~8.4.0"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "@company/apps-config": "^1.1.1",
    "@company/design": "^2.2.0",
    "@storybook/addon-knobs": "^5.3.21",
    "@storybook/addon-links": "^5.3.21",
    "@storybook/addon-ondevice-knobs": "^5.3.23",
    "@storybook/react-native": "^5.3.23",
    "@storybook/react-native-server": "^5.3.23",
    "@types/react": "~16.9.35",
    "@types/react-dom": "~16.9.8",
    "@types/react-native": "~0.63.2",
    "babel-loader": "^8.2.2",
    "expo": "^40.0.0",
    "expo-constants": "~9.3.3",
    "expo-status-bar": "~1.0.3",
    "internal-ip": "^6.2.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "0.63.4",
    "react-native-web": "~0.13.12",
    "typescript": "~4.0.0"
  },
  "peerDependencies": {
    "react": "*",
    "react-native": "*"
  },
  "publishConfig": {
    "@company:registry": "https://gitlab.com/api/v4/projects/xxx/packages/npm/"
  }
}

As you can see, my library requires expo-font because it is responsible of font loading trough a AppWrapper component:

import React, { FunctionComponent } from 'react';
import AppLoading from 'expo-app-loading';
import { useFonts } from 'expo-font';
/* eslint-disable camelcase */
import { Lato_400Regular, Lato_700Bold } from '@expo-google-fonts/lato';
import { Poppins_300Light, Poppins_700Bold } from '@expo-google-fonts/poppins';
/* eslint-enable camelcase */

type Props = {
  loading?: boolean;
}

export const AppWrapper: FunctionComponent<Props> = ({ children, loading }) => {
  const [fontLoaded] = useFonts({
    Lato_400Regular,
    Lato_700Bold,
    Poppins_300Light,
    Poppins_700Bold,
  });

  if (!fontLoaded || loading) {
    return <AppLoading />;
  }

  return (<>{children}</>);
};

export default null;

The interesting thing is I don't have any duplicate with Expo SDK v39, requiring the same component library:

❯ find node_modules -type d -name expo-font
node_modules/expo-font

I may remove expo-font from my library production dependencies, but I wonder what changed between the two SDK version, and I didn't find anything about that on the changelog.

I also changed the deprecated AppLoading usage with the new provided expo package:

diff --git a/src/components/AppWrapper.tsx b/src/components/AppWrapper.tsx
index 85b18c9..ac67ff8 100644
--- a/src/components/AppWrapper.tsx
+++ b/src/components/AppWrapper.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { AppLoading } from 'expo';
+import AppLoading from 'expo-app-loading';
 import { useFonts } from 'expo-font';
 /* eslint-disable camelcase */
 import { Lato_400Regular, Lato_700Bold } from '@expo-google-fonts/lato';

But would be surprised if it's related.

[soullivaneuh]

Here is the expo-font package list under v40:

❯ npm list | grep expo-font@
│ └─┬ expo-font@8.4.0
│ ├─┬ expo-font@8.4.0

And on v39:

❯ npm list | grep expo-font@
│ └─┬ expo-font@8.3.0
│ ├── expo-font@8.3.0 deduped

As you can see, the package is not deduped anymore as it should.

It looks more like a expo-font / Expo SDK issue.

[soullivaneuh]

More accurately, it is the fontfaceobserver that is not deduped:

│ └─┬ expo-font@8.4.0
│   ├── fbjs@1.0.0 deduped
│   └── fontfaceobserver@2.1.0

[Oddisey]

I was having this same issue and just fixed it following advice from this thread: expo/expo#5507

Seems like multiple versions of expo-font can get installed and mess everything up. I ran:

rm -rf ./node_modules/expo/node_modules/expo-font/

And it works now. Hopefully it works for you!

I tried all of the things after going from v39 to v40 of Expo and this is the thing that works. Essentially Expo's npm package has a conflicting expo-font package. So remove that using a postinstall and install the latest version with yarn or npm. I am currently succefully running:

"expo": "^40.0.1",
"expo-font": "^9.0.0",
"@expo/metro-config": "^0.1.55",

[andreluizpd]

Hello, I'm having issues too using more than one google font with the same error. This started to happen after I ejected the expo project.

I tried running the rm -rf ./node_modules/expo/node_modules/expo-font/ command with no success.

and npm list returns:

❯ npm list | grep expo-font@
├── expo-font@10.0.5

Is there a fix for this problem?

[MichaelDM]

None of these solutions worked in my situation.
My package versions are:
"expo": "^45.0.6",
"expo-font": "~10.1.0",

What I realized was that I had placed the following code in App.tsx:

  let [fontsLoaded] = useFonts({
    Roboto_400Regular,
    Roboto_700Bold,
    Roboto_500Medium,
    Roboto_300Light,
  });
  const isLoggedIn = !!auth.user;

  if (!fontsLoaded) {
    <SplashScreen />;
  }

But I used the fonts in components like custom text etc.
The error stopped when inside the components in which I specify the font, I also import the font there and wait for the font to load. Example:

export const H1: FC<BasePropsWithoutFontFamilty> = ({ style, ...rest }) => {
  let [fontsLoaded] = useFonts({
    Roboto_700Bold,
  });
  if (!fontsLoaded) {
    return null;
  }
  return (
    <BaseTypography
      {...rest}
      fontFamily="Roboto_700Bold"
      style={[style, { fontSize: THEME.typography.h1 }]}
    />
  );
};

The only thing I still need to figure out is the potential impact on performance...

[FedericoCampe8]

This worked for me too, i.e., loading on the components I'm using the font. I couldn't figure out how to just load them into the app.js without breaking.

[isaque-cwb]

Tentei de Tudo e nada deu certo pra mim ... o que resolveu foi isso :

verificar se o retorno do useFonts é true e somente aí retornar os componentes do meu App ...
o erro acontecia porque o retorno do useFonts estava mesmo false aí logo em seguida mudava pra true , no meu caso o erro acontecia uma vez só ... no loading do app .

[adipascu]

In our project this is caused by the @expo/vector-icons package loading in an outdated version of expo-font.

[adipascu]

The proper fix was for us was to run npx expo-doctor and follow the on screen instructions.

[jpmastermind]

As @adipascu pointed out, running npx expo-doctor and then npx expo install --fix after reading the instructions solved my issue.