React native Question posted in
The official React Native documentation can be found here.

Why am I getting this error when importing google font into react native expo

I have this code…

import React, { useCallback } from 'react'
import { View, Text } from 'react-native'
import { useFonts } from 'expo-font'
import * as SplashScreen from 'expo-splash-screen'
import Navigation from './Navigation'
import { MaterialCommunityIcons, FontAwesome, Ionicons } from '@expo/vector-icons'

SplashScreen.preventAutoHideAsync()

export default () => {
    const [fontsLoaded] = useFonts({
        ...MaterialCommunityIcons,
        ...FontAwesome,
        ...Ionicons,
        'font-major': require('./assets/fonts/NotoSansJP-Thin.ttf'),
    });
  
    const onLayoutRootView = useCallback(async () => {
        if(fontsLoaded){
            await SplashScreen.hideAsync()
        }
    }, [fontsLoaded])
  
    if(!fontsLoaded){
        return <Text style={{marginTop: 100, fontFamily: 'font-major', fontSize: 100}}>Hey there</Text>
    }

    return (
        <View style={{ flex: 1 }} onLayout={onLayoutRootView}>
            <Text style={{marginTop: 100, fontFamily: 'font-major', fontSize: 100}}>Hey there</Text>
            <Navigation />
        </View>
    )
}

But I’m getting the error…

fontFamily "font-major" 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.
    at RCTText
    at Text (http://192.168.0.135:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:80909:27)
    at anonymous (http://192.168.0.135:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:129860:44)
    at withDevTools(Anonymous) (http://192.168.0.135:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:129481:27)
    at RCTView
    at View (http://192.168.0.135:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:63105:43)
    at RCTView
    at View (http://192.168.0.135:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:63105:43)
    at AppContainer (http://192.168.0.135:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:62945:36)
    at main(RootComponent) (http://192.168.0.135:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:109178:28)

I’ve tried using Font.loadAsync as well, nothing seems to accept this font for some reason, I’ve tried using other google fonts as well. I have literally no idea what I’ve missed.

Tags:

2

Answers


  1. 0

    The font is used before it is loaded.

    if (!fontsLoaded){
    return <Text style={{marginTop: 100, fontFamily: 'font-major', fontSize: 100}}>Hey there</Text>
}

    Return null until the custom font is loaded.

    if (!fontsLoaded){
    return null
}
    Login or Signup to reply.
  2. 0

    The error is stating what you are doing wrong. I had problems as well with the font but fixed it like so. Actually using the Font.loadAsync({}) function the application loads the font effortlessly

      useEffect(() => {
    const loadFonts = async () => {
      await Font.loadAsync({
        "Poppins-Regular": require("@/assets/fonts/Poppins-Regular.ttf"),
      });
      setIsAppReady(true);
    };

    loadFonts();
  }, []);

    I hope this helps you and feel free to ask questions!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search