React Native - Expo：fontFamily 'SimpleLineIcons' 不是系统字体，尚未通过 Font.loadAsync 加载

Question

So I get this error on Android device/emulator:

On iOS on the other hand, it's compiling just fine and the simple-line-icons are displayed properly.

I'm running the latest version of expo.

My package.json:

{
  "name": "FamScore3",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-native-scripts": "1.14.0",
    "jest-expo": "^31.0.0",
    "react-test-renderer": "16.3.1"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "jest"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@firebase/auth": "^0.7.6",
    "@firebase/database": "^0.3.6",
    "axios": "^0.18.0",
    "metro-react-native-babel-preset": "^0.45.0",
    "expo": "^31.0.4",
    "firebase": "^5.5.1",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz",
    "react-native-elements": "^0.19.1",
    "react-native-material-dropdown": "^0.11.1",
    "react-native-router-flux": "^4.0.1",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0"
  }
}

My app.json:

{
  "expo": {
    "sdkVersion": "31.0.0"
  }
}

My Font.loadAsync method in App.js as implemented in the docs:

export default class App extends Component {

  state = {
    fontLoaded: false
  }

  async componentDidMount() {
    try {

      await Font.loadAsync({
        amaticBold: require('./assets/fonts/amaticSC-Bold.ttf'),
        indieFlower: require('./assets/fonts/indieFlower.ttf'),
        'Material Icons': require('@expo/vector-icons/fonts/MaterialIcons.ttf'),
        'simple-line-icons': require('@expo/vector-icons/fonts/SimpleLineIcons.ttf')

      })

      this.setState({ fontLoaded: true })

    } catch (error) {
      console.log('error loading fonts', error);
    }

  }

  render() {
    const store = createStore(reducers, {}, applyMiddleware(ReduxThunk))

    if (!this.state.fontLoaded) {
      return <AppLoading />
    }

    return (
      <Provider store={store}>
        <Router />
      </Provider> 
    )
  }
}

Thanks a lot in advance. Any help would be much appreciated! I've been stuck for a while.

Answer 1

Okay, so I finally managed to solve this issue.

The problem was that iOS and Android apparently require different names for the fonts you want to load.

The simple-line-icons that i loaded in only worked for iOS and so on Android i got this error: fontFamily 'SimpleLineIcons' is not a system font and has not been loaded through Font.loadAsync.

I ended up loading both the simple-line-icons and the SimpleLineIcons, pointing to the same directory like so:

componentDidMount() {
    this.loadAssetsAsync()
  }

  loadAssetsAsync = async () => {
    await Font.loadAsync({
      amaticBold: require('./assets/fonts/amaticSC-Bold.ttf'),
      indieFlower: require('./assets/fonts/indieFlower.ttf'),
      'Material Icons': require('@expo/vector-icons/fonts/MaterialIcons.ttf'),
      'MaterialIcons': require('@expo/vector-icons/fonts/MaterialIcons.ttf'),
      'SimpleLineIcons': require('@expo/vector-icons/fonts/SimpleLineIcons.ttf'),
      'simple-line-icons': require('@expo/vector-icons/fonts/SimpleLineIcons.ttf')
    })
    this.setState({ fontLoaded: true })
  }

  render() {
    const store = createStore(reducers, {}, applyMiddleware(ReduxThunk))

    if (!this.state.fontLoaded) {
      return <AppLoading />
    }

    return (
      <Provider store={store}>
        <Router />
      </Provider>
    )
  }

This admittedly ugly solution solved my issue for now. Make sure you really type exactly like the error tells you to. If the error is: fontFamily 'MyAwesomeFont' is not a system font... Then you really need to name it:

Font.loadAsync({
    'MyAwesomeFont': require('./path/to/MyAwesomeFont.ttf')
})

Hope this helps anyone out there.

Answer 2

I had the same issue and I found that changing the font name to the one you named can solve issue:

// Before
'my-awesome-font': require('./path/to/my-awesome-font.ttf')

// After
'MyAwesomeFont': require('./path/to/my-awesome-font.ttf')

It may be the dash sign that cannot be used.

Answer 3

I had the same problem and wasted a lot of time on this error. This is 2021 and there is a better way to do the same thing so instead of using the code below

Font.loadAsync({
    'MyAwesomeFont': require('./path/to/MyAwesomeFont.ttf')
})

The correct way to do this is

import { useFonts } from 'expo-font';
import AppLoading from 'expo-app-loading';

  let [fontsLoaded] = useFonts({
    'open-sans': require('./assets/fonts/OpenSans-Regular.ttf'),
    'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
  });
  if (!fontsLoaded) {
    return <AppLoading />;
  }

If you want further explanation check the official docs here

Answer 4

I faced this error when I was using @react-native-render-html , where it was rendering the Html generated from other cms, and this causes the font family problem if the content creator used a custom font.

so to solve this I used the ignoredStyles feature in html renderer, and then set the baseFontStyle to make a uniform look of the text contents.

code:

import HTML from "react-native-render-html"`

<HTML ignoredStyles={['fontFamily']} baseFontStyle={[fontFamily: 'nunito-regular', fontSize: 16]} />

Answer 5

If you are coming from 'The net ninja' Tuto here is the solution

Home.js

import React, { useState } from 'react';
import {StyleSheet, View, Text } from 'react-native';

export default function Home() {
    return (
        <View style={styles.container}>
            <Text style={styles.titleText}>Home Screen</Text>
        </View>
    );
}

// https://docs.expo.dev/guides/using-custom-fonts/
const styles = StyleSheet.create({
    container: {
        padding: 24,
    },
    titleText:{
        fontFamily: 'Nunito-Bold',
        fontSize: 24,
    }
})

App.js

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Home from './screens/home';

import { useFonts } from 'expo-font';
import AppLoading from 'expo-app-loading';

export default function App() {
  // const [fontsLoaded, setFontsLoaded] = useState(false);

  const [fontsLoaded] = useFonts({
    'Nunito-Regular': require('./assets/fonts/Nunito-Regular.ttf'),
    'Nunito-Bold': require('./assets/fonts/Nunito-Bold.ttf'),
  });

  if (!fontsLoaded) {
    return (
      <AppLoading />
    )
  } else {
    return (
      <Home />
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});