Font.loadAsync fonts and icons don't appear in built apps

I hope this is the right place to post this! I’ve got a problem with my builds where my custom fonts and my expo-vector-icons icons don’t render in my built apps. Custom fonts default to sans-serif, and icons appear as squares with question marks and Asian glyphs.

In my Expo development versions, everything works just fine.

Here’s my package.json:

{
  "main": "index.js",
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "expo start --web",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-community/masked-view": "0.1.6",
    "@react-native-community/netinfo": "5.5.1",
    "@react-navigation/bottom-tabs": "^5.3.3",
    "@react-navigation/drawer": "^5.6.4",
    "@react-navigation/native": "^5.2.3",
    "@react-navigation/stack": "^5.2.18",
    "@use-expo/font": "^2.0.0",
    "axios": "^0.19.2",
    "expo": "^37.0.0",
    "expo-constants": "~9.0.0",
    "expo-font": "~8.1.0",
    "expo-image-picker": "~8.1.0",
    "expo-image-picker-multiple": "^1.1.5",
    "expo-permissions": "~8.1.0",
    "expo-screen-orientation": "~1.0.0",
    "expo-updates": "~0.1.2",
    "install": "^0.13.0",
    "jwt-decode": "^2.2.0",
    "moment": "^2.25.0",
    "nanoid": "^3.1.3",
    "react": "16.9.0",
    "react-dom": "16.9.0",
    "react-native": "0.61.4",
    "react-native-aws3": "^0.0.9",
    "react-native-collapsible": "^1.5.2",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-image-zoom-viewer": "^2.2.27",
    "react-native-mime-types": "^2.3.0",
    "react-native-paper": "^3.9.0",
    "react-native-picker-select": "^7.0.0",
    "react-native-reanimated": "~1.7.0",
    "react-native-render-html": "^4.2.0",
    "react-native-safe-area-context": "0.7.3",
    "react-native-screens": "~2.2.0",
    "react-native-status-bar-height": "^2.5.0",
    "react-native-unimodules": "~0.8.1",
    "react-native-vector-icons": "^6.6.0",
    "react-native-web": "^0.11.7",
    "react-native-webview": "8.1.1"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "babel-jest": "~25.2.6",
    "jest": "~25.2.6",
    "react-test-renderer": "~16.9.0"
  },
  "jest": {
    "preset": "react-native"
  },
  "private": true
}

And the output of Expo’s diagnostics:

  Expo CLI 3.20.3 environment info:
    System:
      OS: Linux 5.6 Arch Linux
      Shell: 5.8 - /usr/bin/zsh
    Binaries:
      Node: 14.1.0 - ~/.nvm/versions/node/v14.1.0/bin/node
      Yarn: 1.22.4 - ~/.nvm/versions/node/v14.1.0/bin/yarn
      npm: 6.14.4 - ~/.nvm/versions/node/v14.1.0/bin/npm
    npmPackages:
      expo: ^37.0.0 => 37.0.9 
      react: 16.9.0 => 16.9.0 
      react-dom: 16.9.0 => 16.9.0 
      react-native: 0.61.4 => 0.61.4 
      react-native-web: ^0.11.7 => 0.11.7 
    npmGlobalPackages:
      expo-cli: 3.20.3

And here’s an extract of the relevant code:

const App = () => {
  
  useEffect(() => {
    
    // Snip

    _loadFontsAsync();

  }, [])

  const fonts = {
    'Quicksand-Light': require('./assets/fonts/Quicksand-Light.ttf'),
    'Quicksand-Medium': require('./assets/fonts/Quicksand-Medium.ttf'),
    'Quicksand-Regular': require('./assets/fonts/Quicksand-Regular.ttf'),
    'Quicksand-SemiBold': require('./assets/fonts/Quicksand-SemiBold.ttf'),
    'Quicksand-Bold': require('./assets/fonts/Quicksand-Bold.ttf'),
    'Ubuntu-Regular': require('./assets/fonts/Ubuntu-Regular.ttf'),
    'Ubuntu-Bold': require('./assets/fonts/Ubuntu-Bold.ttf'),
    'Ubuntu-Medium': require('./assets/fonts/Ubuntu-Medium.ttf'),
    'Ubuntu-Light': require('./assets/fonts/Ubuntu-Light.ttf'),
    'Ubuntu-Italic': require('./assets/fonts/Ubuntu-Italic.ttf'),
    'Ubuntu-BoldItalic': require('./assets/fonts/Ubuntu-BoldItalic.ttf'),
    ...FontAwesome5.font,
    ...MaterialCommunityIcons.font
  };

  async function _loadFontsAsync() {
    await Font.loadAsync(fonts);
    setFontsLoaded(true)
  }

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

I’ve been tearing my hair out over this all day, and I can see from GitHub that there have been issues in the past with Font.loadAsync - so if I’ve ended up installing any packages in desperation that I wasn’t meant to, let me know…

Here’s one seemingly relevant issue: Font.loadAsync not loading third-party fonts and also vector icons · Issue #6476 · expo/expo · GitHub (but as the fix is to update to an earlier version of the SDK, I haven’t followed it.)

I’m also not convinced that I’m loading the icon fonts right, but then, nothing really seemed to make a difference, and the normal fonts aren’t loading either.

Just in case this post just below mine (Custom Fonts Not Working in TestFlight Builds - #2 by notbrent) is relevant, my app is not ejected and I do have an android and ios directory.

Those following along at home will be delighted to know that I made a brand new Expo project, copied all the files across, carefully installed all the packages I was actually using, and fonts and icons now work in my built apps!

i’d be curious if you can compare the differences between your projects what ended up causing this. it certainly does look like you had an ejected app, based on the scripts in your package.json saying “react-native run-android” for android rather than “expo start --android”

You’re absolutely right, I only realised latterly that I absolutely had an ejected app, which was not my intention! As you might be able to tell, this is my first Expo attempt. :wink: I wonder if it would be worth briefly hinting for fools like me what option to pick for what purpose in that section of expo init, as happens in the build sections of expo-cli.

What I changed (I mean, take your pick, really):

  • I moved all the async loading the app was doing from two separate files into one.
  • I only installed the packages I was actually using, using my favourite ‘Reload, get red screen, expo install’ debugging method. :stuck_out_tongue:
  • I was at one point using React Native Paper to manage the fonts, and that method is definitely gone now, although I think I can discount that.
  • I’m no longer confusingly using both react-native-vector-icons and expo-vector-icons, although that doesn’t explain why the fonts weren’t working either.
  • I had resources in two separate assets folders. No more!

Here’s my new package.json:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/masked-view": "0.1.6",
    "@react-navigation/bottom-tabs": "^5.4.2",
    "@react-navigation/native": "^5.3.0",
    "@react-navigation/stack": "^5.3.3",
    "axios": "^0.19.2",
    "expo": "~37.0.3",
    "expo-image-picker": "~8.1.0",
    "jwt-decode": "^2.2.0",
    "moment": "^2.25.3",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
    "react-native-aws3": "^0.0.9",
    "react-native-collapsible": "^1.5.2",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-image-zoom-viewer": "^3.0.0",
    "react-native-mime-types": "^2.3.0",
    "react-native-paper": "^3.10.1",
    "react-native-picker-select": "^7.0.0",
    "react-native-reanimated": "~1.7.0",
    "react-native-render-html": "^4.2.0",
    "react-native-safe-area-context": "0.7.3",
    "react-native-screens": "~2.2.0",
    "react-native-web": "~0.11.7",
    "react-native-webview": "8.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "babel-preset-expo": "~8.1.0"
  },
  "private": true
}

ahh, so you had initialized a “bare workflow” app before?

Yep, and I only realised what it was I’d clicked when I was doing the new expo init (having read a lot more of the Expo docs in the intervening period).

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.