expo: [Font] Expo cannot load a font due to multiple versions of `expo-font` installed

🐛 Bug Report

Environment

  Expo CLI 3.0.10 environment info:
    System:
      OS: Linux 5.2 Solus 4.0
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 10.16.3 - /usr/bin/node
      Yarn: 1.15.2 - ~/.yarn/bin/yarn
      npm: 6.1.0 - ~/.config/yarn/global/node_modules/.bin/npm
    npmPackages:
      expo: ^34.0.4 => 34.0.4 
      react: 16.8.3 => 16.8.3 
      react-native: https://github.com/expo/react-native/archive/sdk-34.0.1.tar.gz => 0.59.8 
      react-navigation: ^3.12.0 => 3.12.0 
    npmGlobalPackages:
      expo-cli: 3.0.10

I’m debugging an iOS app.

Steps to Reproduce

Add a font in an expo app with Font.loadAsync()
Use any glyph of this font

Expected Behavior

Expo must draw a glyph with the custom font.

Actual Behavior

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

Bug explanation

Currently, we need to import * as Font from "expo-font" in code and use Font.loadAsync(aCustomFont) to load the font. So we use a “expo-font” module from node_modules.

In expo, the withExpoRoot.tsx file import the Font.processFontFamily function to use custom fonts and draw glyphs of these fonts (see the code here).

But the expo module uses another expo-font module which is installed in the node_modules of the expo module.

In other way, expo works with 2 expo-font modules. But the problem is the module which is loading fonts in custom code (with Font.loadAsync) is different from the one in expo which is using fonts (with Font.processFontFamily).

Here’s a screenshot from the node_modules folder in my text editor with the 2 expo-font modules :

I hope I’ve been clear in my explanation. And thanks for developing expo ! 😃

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 3
Comments: 24 (6 by maintainers)

Most upvoted comments

I’m having this issue as well with Expo SDK 35. rm -rf ./node_modules/expo/node_modules/expo-font/ fixed the issue for me, but obviously nuking node modules and reinstalling causes the issue to come back. For now I’m adding this as a postinstall script in package.json.

+33

SteveAquino on Sep 25, 2019

I didn’t have this issue upgrading from SDK 33 => 34 (ejected), but I am with the 34 => 35 upgrade I’m performing this morning.

I have erased the iOS simulator content & settings multiple times, cleared the build in Xcode, delete the node_modules folder, and started the expo server with the cache clear option multiple times.

I have also tried suggestions from all of these issues:

The suggestion above about removing the nested expo-font folder as part of a post-install script was the only one that fixed the issue for me.

macfanatic on Oct 15, 2019

Hi, same problem here after upgrading from sdk 33 to 34

adblanc on Sep 12, 2019

@brentvatne - that’s really crazy, i installed them again and they worked smoothly. I think the problem that i didn’t use expo install the first time i installed them. Any way THANK YOUUU!!

YahiaBadr on Apr 2, 2020

This issue popped up again when i upgraded from v35 to v36. Only rm -rf ./node_modules/expo/node_modules/expo-font/ worked for me

celandro on Mar 28, 2020

I’m also having this problem

miversen on Sep 24, 2019

Okay so after more than 20 restarts with clear cache option, it works. I don’t know why.

HackJack-101 on Sep 3, 2019

We are using expo-font v6.0.1

{
name: "ukit",
version: "3.5.0",
description: "Ukit",
author: "HackJack",
private: true,
main: "node_modules/expo/AppEntry.js",
dependencies: {
@expo/vector-icons: "^10.0.5",
axios: "^0.19.0",
expo: "^34.0.4",
expo-asset: "^6.0.0",
expo-constants: "^6.0.0",
expo-font: "^6.0.1",
jest-expo: "^34.0.0",
moment: "^2.22.2",
prop-types: "^15.6.2",
react: "16.8.3",
react-native: "https://github.com/expo/react-native/archive/sdk-34.0.1.tar.gz",
react-native-collapsible: "^1.0.0",
react-native-gesture-handler: "^1.2.2",
react-native-maps: "^0.24.2",
react-native-popup-dialog: "^0.15.0",
react-native-reanimated: "^1.0.0-alpha.11",
react-native-root-toast: "^3.0.1",
react-native-simple-store: "^1.3.0",
react-native-svg: "^9.4.0",
react-native-textinput-effects: "^0.4.0",
react-navigation: "^3.12.0",
react-redux: "^5.0.7",
redux: "^3.7.2",
redux-persist: "^5.10.0",
sentry-expo: "~1.13.0"
},
devDependencies: {
prettier: "^1.14.2"
}
}

HackJack-101 on Sep 2, 2019