Font.loadAsync issues

I just installed Expo a couple of days ago - SDK 32.0.0

I am struggling with Font.async. The docs specifically say Font - Allows loading fonts from the web and using them in React Native components. This implies you can load the files from a remote URI. However, I just cannot get this to work.

All I have done is changed this line in the example project:

'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf')

to:

'test-font': 'http://localhost:8000/fonts/MyCustomFont.otf

(http://localhost:8000 is a local server which is serving up the font files - it makes no difference if I swap this out for something that is fully online)

However, now I get this error every time when trying to use fontFamily: 'test-font' once the load is complete:

fontFamily "test-font" 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.

The main thing is that I am definitely using Font.loadAsync as you can see. I canā€™t figure out why the font file is not registering if the load is completing without errors.

Whatā€™s even stranger is that if I write a new method for componentWillMount as follows (adding another condition to hold the loading screen until fontLoaded is true in state), I no longer get the error, but a warning, with an out-of-date link to docs:

async componentWillMount() {
  await Font.loadAsync({
    'test-font' : 'http://localhost:8000/fonts/MyCustomFont.otf',
  });

  this.setState({
    fontLoaded: true,
  });
}

Yields:

Loading fonts from remote URIs is temporarily not supported. Please download the font file and 
load it using require. See: https://docs.expo.io/versions/latest/guides/using-custom- 
fonts.html#downloading-the-font
- node_modules/expo-font/build/Font.js:74:24 in _getAssetForSource
- node_modules/expo-font/build/Font.js:58:37 in loadAsync$
... etc.

So my main questions/points are:

  • Why is there a warning in one lifecycle method but an error in another, even though the font load completes?
  • Looks like node_modules/expo-font/build/Font.js:74:24 needs to update to the newest link to docs
  • If Font cannot be used to load from the web and does indeed need require, then the online docs should be updated as there is a huge difference between being able to load remotely and not when considering project viability.

Any help welcome - thanks in advance!

1 Like

I recently got the same issue. Even when there is no error warning, the font has no effect at all.

Hi, your remote url is ā€˜http://localhost:8000ā€™ ?

Why not simply move your custom font into expo assets ?

Hi @batmat - that remote URL localhost:8000 is just for testing ā€“ itā€™s a private CMS which is serving up the font files, and works fine. It could be anything - the effect is the same, that loading from the remote URI does not work (I have tried others).

I will have quite a lot of font files, and want to manage them myself. I want to load/cache the fonts on demand. Using require to load the fonts is not the way I want to do it. Unless by ā€œmove your custom font into expo assetsā€ you mean something other than using the app assets directory, in which case thatā€™s something I donā€™t know about :slight_smile:

Yean i meant the app assets directory :slight_smile:

Alright then idk how to for remote uri. You said ā€œI want to load/cache the fonts on demandā€.
Donā€™t wanna make a call to your server before loading fonts, and load the wanted one from expo assets ? Right now iā€™m not sure if there is an other solution.

Thanks @batmat. Iā€™m not sure there is either.

As I mentioned in my original post, maybe the docs are just wrong and need updated so they donā€™t say Allows loading fonts from the web and using them in React Native components

1 Like

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