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.