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!