I'm using Font.loadAsync and still getting error fontFamily "open-sans" is not a system font and has not been loaded through Font.loadAsync

Question

what's wrong with my code why wont it add the font to my app

I'm getting this error fontFamily "open-sans" 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.

mport React from 'react'; import { View, Text } from 'react-native'; import { Font } from 'expo';

this.state = { fontLoaded: false, }

Im using Font.loadAsync did i write it wrong?

async componentDidMount() {
      await Font.loadAsync({
        'OpenSans-Bold': require('./assets/fonts/OpenSans-Bold.ttf')
      }).then(() => {
        this.setState({ fontLoaded: true });
      });
    }
return (

     <View style={styles.container}>
     { this.state.fontLoaded === true ? (
       <React.Fragment>
</React.Fragment>
    ) : (<Text style={styles.inputText}>Loading... </Text>)
  }
      </View>
inputText: {
  fontSize: hp('3%'),
  color: '#5D5D5D',
  fontWeight: 'bold',
  paddingVertical: hp('0.5%'),
  paddingLeft: wp('6.5%'),
  fontFamily: 'open-sans'

},

my pacakadge.json file

{
  "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",
    "rnpm": {
      "assets": [
     "./assets/fonts/"
      ]
    }

}

hong developer hong developer · Accepted Answer · 2019-08-16T03:00:13

From SDK 33 the built-in modules of Expo must be installed. So you have to install a font module.

You can run expo install expo-font

The font name you registered with is different from the font name you want to use. And the conditional statement is wrong. After loading the font, make the text visible.

Change your font name

import * as Font from 'expo-font';
...
this.state={
   fontLoaded: false
}
async componentDidMount() {
      await Font.loadAsync({
        'OpenSans-Bold': require('./assets/fonts/OpenSans-Bold.ttf')
      });

        this.setState({ fontLoaded: true });

    }
return (

     <View style={styles.container}>
     { this.state.fontLoaded !== true ? (
       <React.Fragment>
</React.Fragment>
    ) : (<Text style={styles.inputText}>Loading... </Text>)
  }
      </View>
inputText: {
  fontSize: hp('3%'),
  color: '#5D5D5D',
  fontWeight: 'bold',
  paddingVertical: hp('0.5%'),
  paddingLeft: wp('6.5%'),
  fontFamily: 'OpenSans-Bold'

},

I'm using Font.loadAsync and still getting error fontFamily "open-sans" is not a system font and has not been loaded through Font.loadAsync

1 Answers