Font.loadAsync loads some fonts, does not load others

🐛 Bug Report

Environment

Expo CLI 2.17.1 environment info: System: OS: Windows 10 Binaries: Yarn: 1.9.4 - C:\Users\yossi\AppData\Roaming\npm\yarn.CMD npm: 6.1.0 - C:\Program Files\nodejs\npm.CMD IDEs: Android Studio: Version 3.3.0.0 AI-182.5107.16.33.5314842

Target: Android

Steps to Reproduce

In an expo generated project (project with tabs), I modified the Font.loadAsync call as following:

Font.loadAsync({
  // The following fonts are loaded successfully
        'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
        'pixel-font': require('./assets/fonts/PixelFJVerdana12pt.ttf'),
        'Anton': require('./assets/fonts/Anton.ttf'),
        'OpenSans-Regular': require('./assets/fonts/OpenSans-Regular.ttf'),
        'OpenSans-CondLight': require('./assets/fonts/OpenSans-CondLight.ttf'),
        'Montserrat-Regular.ttf': require('./assets/fonts/Montserrat-Regular.ttf'),

  // The following fonts are not loaded (an error message is displayed. See 'actual behavior' below.
        'Raleway-Regular': require('./assets/fonts/Raleway-Regular.ttf'),
        'Alegreya-Regular': require('./assets/fonts/Alegreya-Regular.ttf'),
        'NotoSans-Regular': require('./assets/fonts/NotoSans-Regular.ttf'),
        'Oswald-Regular': require('./assets/fonts/Oswald-Regular.ttf'),
        'EBGaramond-Regular': require('./assets/fonts/EBGaramond-Regular.ttf'),
        'RobotoRegular': require('./assets/fonts/Roboto-Regular.ttf'),
      }),

Expected Behavior

To have all fonts loaded successfully.

Actual Behavior

In the above fonts list, all the fonts that are listed after The following fonts are not loaded are not loaded. The others are loaded properly. For the fonts that don’t load, I get the following message: Font.loadAsync unexpected exception: Font not found /data/user/0/host.exp.exponent/cache/ExperienceData/<Folder>/ExponentAsset-<number>.ttf

Reproducible Demo

• Create a new expo project, using expo init (with tabs)
• Replace Font.loadAsync with the above code
• Run the app on your android emulator or device

App.json:

{
  "expo": {
    "name": "expo-fonts2",
    "slug": "expo-font2",
    "privacy": "public",
    "sdkVersion": "32.0.0",
    "platforms": [
      "ios",
      "android"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "packagerOpts": {
      "assetExts": ["ttf"]
    },
    "icon": "./assets/images/icon.png",
    "splash": {
      "image": "./assets/images/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    }
  }
}

package.json:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject",
    "test": "node ./node_modules/jest/bin/jest.js --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/samples": "2.1.1",
    "expo": "^32.0.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-navigation": "^3.0.9"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0",
    "jest-expo": "^32.0.0"
  },
  "private": true
}

[dayman]

Having same error but after updating to Expo 34. Before (on 33) there was no issues with same ttf files.

[oshimayoan]

I think I found the cause. So actually, the font is loaded but it takes more than 3000ms on Safari and Firefox.

FontObserver that being used by the expo-font has default timeout 3000ms and there is no way to change that timeout from loadAsync.

So when I tried to set the state without waiting for loadAsync it works fine on the web even though the default font will be used first as the font has not been loaded yet.

This implementation is fixing my problem:

if (IS_WEB) {
  Font.loadAsync({
    'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
  }).catch(() => {});
} else {
  await Font.loadAsync({
    'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
  });
}
setFontsLoaded(true);