Custom Font imports with expo-font

Please provide the following:

  1. SDK Version: 33 (upgrading from 32)
  2. Platforms(ios/android/both): Both

First time posting on the forums. Hi, everybody!

I recently took over an Expo project and through the course of working on it decided it needed to be updated to SKD 33 for BackgroundFetch and Hooks support. The update went off well enough but now I’m having trouble with my custom font imports.

I changed the import to the suggested:

import * as Font from "expo-font";

I’m using an async loader for the font itself with:

_loadResourcesAsync = async () => {
    // const { dispatch } = this.props;
    const imageAssets = this.cacheImages([
      // Pictures
    ]);

    await Promise.all([
      Font.loadAsync({
        gore: require("../assets/fonts/goreRough.otf"),
        verdana: require("../assets/fonts/verdana.ttf"),
        verdanaBold: require("../assets/fonts/verdanaBold.ttf"),
        "Gill Sans MT Condensed": require("../assets/fonts/gillSansCondensed.ttf"),
        "Gill Sans MT Condensed Bold": require("../assets/fonts/gillSansCondensedBold.ttf")
      }),
      ...imageAssets
    ]);

    let localPlayer = await retrieveData("playerInfo");

    const dud = {
      id: false,
      campaignId: false
    };
    if (!localPlayer) {
      localPlayer = dud;
      // await this.setState({
      //   newPlayerModalVisible: true,
      // });
    } else {
      localPlayer = JSON.parse(localPlayer);
    }
    // await this.setState({ localPlayer });
    console.log("LOCAL PLAYER : ", localPlayer);
  };

And when the Async loading is finished, an event fires off to change update state to ready with:

_handleFinishLoading = async () => {
    Linking.addEventListener("url", event => this.handleOpenURL(event.url));

    await this.setState({
      isReady: true
    });
  };

This triggers the render with a conditional:

render() {
    // const prefix = Linking.makeUrl("/");
    if (this.state.isReady) {
      return (...)

The full error log is here:

fontFamily "gore" 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.
- node_modules/expo/build/environment/muteWarnings.fx.js:27:24 in error
- node_modules/expo/node_modules/expo-font/build/Font.js:23:16 in processFontFamily
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:3545:38 in diffProperties
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:3419:6 in addNestedProperty
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:3556:8 in diffProperties
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:4003:29 in createInstance
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14437:12 in completeWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17094:10 in completeUnitOfWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17304:30 in performUnitOfWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17316:41 in workLoop
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17417:15 in renderRoot
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18423:17 in performWorkOnRoot
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18324:24 in performWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18285:14 in performSyncWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18169:19 in requestWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17969:16 in scheduleWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:6934:17 in enqueueSetState
- node_modules/react/cjs/react.development.js:335:31 in setState
* src/App.js:144:24 in _callee2$
- node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- node_modules/regenerator-runtime/runtime.js:271:30 in invoke
- node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- node_modules/regenerator-runtime/runtime.js:135:28 in invoke
- node_modules/regenerator-runtime/runtime.js:170:17 in <unknown>
- node_modules/promise/setimmediate/core.js:45:7 in tryCallTwo
- node_modules/promise/setimmediate/core.js:200:23 in doResolve
- node_modules/promise/setimmediate/core.js:66:12 in Promise
- node_modules/regenerator-runtime/runtime.js:169:27 in callInvokeWithMethodAndArg
- node_modules/regenerator-runtime/runtime.js:192:38 in enqueue
- node_modules/regenerator-runtime/runtime.js:216:8 in async
* src/App.js:141:25 in _callee2
- node_modules/expo/build/launch/AppLoading.js:31:20 in _callee$
- node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- ... 14 more stack frames from framework internals

package.json:

{
  "main": "src/app.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "buffer": "^5.2.1",
    "cloudinary-react": "^1.1.0",
    "eslint-plugin-prettier": "^3.1.0",
    "expo": "^33.0.0",
    "expo-asset": "^6.0.0",
    "expo-background-fetch": "^5.0.1",
    "expo-font": "^5.0.1",
    "expo-keep-awake": "^5.0.1",
    "path-parser": "^4.2.0",
    "prop-types": "^15.6.2",
    "react": "16.8.3",
    "react-loading": "^2.0.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
    "react-native-background-fetch": "^2.6.0",
    "react-native-background-task": "^0.2.1",
    "react-native-dotenv": "^0.2.0",
    "react-native-indicators": "^0.13.0",
    "react-native-modal": "^7.0.2",
    "react-native-pose": "^0.9.1",
    "react-native-responsive-screen": "^1.2.0",
    "react-navigation": "^3.11.0",
    "react-navigation-fluid-transitions": "^0.3.2",
    "react-redux": "^6.0.0",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "redux-persist": "^5.10.0",
    "redux-saga": "^1.0.1",
    "socket.io-client": "^2.1.1",
    "styled-components": "^4.3.1",
    "uuid": "^3.3.2"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.3",
    "babel-preset-expo": "^5.0.0",
    "eslint": "^6.2.2",
    "eslint-config-airbnb": "*",
    "eslint-config-prettier": "^6.1.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "*",
    "eslint-plugin-react": "*",
    "eslint-plugin-react-native": "*",
    "husky": "^3.0.4",
    "lint-staged": "^9.2.5",
    "metro-react-native-babel-preset": "^0.51.1",
    "prettier": "1.18.2"
  },
  "private": true,
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,css,json,md}": [
      "prettier --write",
      "git add"
    ],
    "*.js": [
      "eslint --fix",
      "git add"
    ]
  }
}

Custom fonts were working on SDK 32, and now they don’t on SDK 33. I changed the import syntax to accommodate this change and that doesn’t seem to have done anything. Any help would be appreciated. Please ask for more info if you need it. I’m new to forum posting for developer related questions.

Hey @stuart51,

From my initial review, it looks like you have implemented everything correctly. Could you (if you haven’t already) try using a different custom font to see if it loads properly? Another thing to try is running expo install expo-font and see if that changes anything.

Cheers,
Adam

Thanks for the help, Adam. I installed expo-fonts using this method, and even had to rollback the versioning from 6.0.0 to ^5.0.01 I believe. The other fonts seem to load properly as well.
I switched machines for the day and have had success loading them in the other environment, so I must conclude that it is a local environment issue, which is equally baffling to me.

Thanks again!

Glad you got things somewhat sorted out haha. Hopefully you can get some more clarity into the local env puzzle.

Okay, so I’ve gotten everything in working order on machine #1. It was some vestigial code dependencies in the package-lock.json. Deleting my node_modules and package-lock.json files and rerunning npm i did the trick!:man_facepalming:

1 Like