expo: Font.loadAsync not loading third-party fonts and also vector icons

🐛 Bug Report

Environment

Expo CLI 3.11.1 environment info:
    System:
      OS: Windows 10
    Binaries:
      Yarn: 1.19.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
      npm: 6.13.3 - C:\Program Files\nodejs\npm.CMD
    IDEs:
      Android Studio: Version  3.5.0.0 AI-191.8026.42.35.5791312
    Target: Android and iOS

Steps to Reproduce

upgrade to expo sdk 36

Expected Behavior

To load the font like it does in sdk 35.

Actual Behavior

It is showing this error even though the font is loaded correctly in App.js -

fontFamily "space-mono" 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\react-native\Libraries\YellowBox\YellowBox.js:63:8 in console.error
- 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\implementations\ReactNativeRenderer-dev.js:3683:38 in diffProperties
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3557:6 in addNestedProperty
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3694:8 in diffProperties
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:4109:29 in createInstance
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15835:12 in completeWork
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19409:28 in completeUnitOfWork
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19380:30 in performUnitOfWork
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19347:39 in workLoopSync
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18997:22 in renderRoot
* [native code]:null in renderRoot
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18709:28 in runRootCallback
* [native code]:null in runRootCallback
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1
- node_modules\scheduler\cjs\scheduler.development.js:643:23 in unstable_runWithPriority
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18556:30 in scheduleUpdateOnFiber
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:7799:17 in classComponentUpdater.enqueueSetState
- node_modules\react\cjs\react.development.js:325:31 in Component.prototype.setState
* http://192.168.43.115:19001/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&minify=false&hot=false:133659:27 in dispatch
- node_modules\@react-navigation\core\lib\module\getChildNavigation.js:1:1478 in actionHelpers.actionName
* http://192.168.43.115:19001/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&minify=false&hot=false:165555:48 in _callee$
- 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:145:19 in Promise.resolve.then$argument_0
- node_modules\promise\setimmediate\core.js:37:14 in tryCallOne
- node_modules\promise\setimmediate\core.js:123:25 in setImmediate$argument_0
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:146:14 in _callTimer
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:194:17 in _callImmediatesPass
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:458:30 in callImmediates
* [native code]:null in callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:407:6 in __callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:143:6 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:142:17 in __guard$argument_0
* [native code]:null in flushedQueue
* [native code]:null in invokeCallbackAndReturnFlushedQueue

Reproducible Demo

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 11
Comments: 24

Links to this issue

fontFamily "FontAwesome" is not a system font - Expo

Most upvoted comments

please try running watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && rm -f package-lock.json && rm -f yarn.lock && npm cache verify && npm install && expo r -c its probably a caching error

+26

zeritte on Dec 10, 2019

If anyone still have this font not loaded issue, try check your code where you use fontFamily: '', either its clashed with fontWeight: '' or not. eg:

// component
<Text style={styles.text}>Testing 123</Text>

// styles
text: {
  fontSize: 12,
  fontFamily: 'Quicksand',
  fontWeight: 'bold' <-- remove this
}

So basically, the custom font(let say from Google Fonts) looks unloaded because of the fontWeight. Actually, its already loaded, but not showing because it clashed. Try removing it and see.

warifmust on Sep 19, 2020

I fix this problem by removing the expo-font folder inside node-modules/expo/node-modules. In my case I had 2 expo-font installed.

I followed this link!

luizfverissimo on Jun 25, 2020

Weird. I’d tried everything, including deleting the node_modules folder and the package-lock.json file and it hadn’t helped. Upgrading to 36.0.1 worked immediately.

MikeMJ on Dec 27, 2019

Just as you would upgrade any package. You can:

Change the expo version in package.json file from “^36.0.0” to “^36.0.1” and issue the “npm install” command. This will go over every single package defined in the package.json file

Or just execute “npm install expo@36.0.1”

You might also try expo upgrade, but I’m not sure if this will work. I doubt it only works for major version upgrades. But again, this is just a doubt.

I dont recommend 1st and 2nd solutions. I tried them and failed. I suggest expo upgrade, say yes even if it says

you are on the latest version, would you like to move on?

zeritte on Dec 26, 2019

Just as you would upgrade any package. You can:

Change the expo version in package.json file from “^36.0.0” to “^36.0.1” and issue the “npm install” command. This will go over every single package defined in the package.json file
Or just execute “npm install expo@36.0.1”
You might also try expo upgrade, but I’m not sure if this will work. I doubt it only works for major version upgrades. But again, this is just a doubt.

MikeMJ on Dec 26, 2019

If anyone still have this font not loaded issue, try check your code where you use fontFamily: '', either its clashed with fontWeight: '' or not. eg:
// component
<Text style={styles.text}>Testing 123</Text>

// styles
text: {
  fontSize: 12,
  fontFamily: 'Quicksand',
  fontWeight: 'bold' <-- remove this
}
So basically, the custom font(let say from Google Fonts) looks unloaded because of the fontWeight. Actually, its already loaded, but not showing because it clashed. Try removing it and see.

this fix my problem but I need some hack to make bold works

let customFonts = {
  'Ubuntu': require('./../assets/fonts/Ubuntu-Regular.ttf'),
  'Ubuntu-Bold': require('./../assets/fonts/Ubuntu-Bold.ttf'),
};

export default function({style, ...props}:any) {
  let newStyle = {...style} || {}
  let fontWeight = newStyle.fontWeight || null
  if(fontWeight){
    delete newStyle.fontWeight
  }
  const [loaded, setLoaded] = useState(false)
  const _loadFontsAsync = async () => {
    await Font.loadAsync(customFonts);
    setLoaded(true)
  }

  useEffect(() => {
    _loadFontsAsync() 
  }, [])

  if(!loaded){
    return <AppLoading />
  } else {
    return (
      <Text style={{...newStyle, fontFamily: fontWeight === 'bold' ? 'Ubuntu-Bold' : 'Ubuntu'}} {...props} />
    )
  }
}

psudocode on Mar 1, 2021

I’m facing this issue frequently but now after last 2 days I was consistently trying to figure out. I had "expo": "^36.0.1". After following the advice of @MikeMJ I have done npm i expo@36.0.1, then Boom! It works!!!

creativemind1 on Apr 28, 2020

I tried to upgrade to version 36.0.1 and it didn’t work. I do not know what else to do.

loureironanda on Jan 23, 2020