React Native Expo, custom font problems

Question

please help me I have custom font problem in my app. I have console error - "Inter-SemiBold" is not a system font and has not been loaded through Font.loadAsync

I tried everything but nothing changed :( :(. Please help me

Answer 1

You need to install a font and load it in order to use it if it's not part of the device fonts.

npm install @expo-google-fonts/inter

Then

import { Inter_600SemiBold as Inter } from "@expo-google-fonts/inter";

...

// Put this inside your component
useEffect(() => {
    const loadFonts = async () => {
      await Font.loadAsync({
        Inter
      });
      setFontsLoaded(true);
    }
    loadFonts();
  }, [])
  if (!fontsLoaded) {
    return (
      //Loading page
    )
  }
  return (
    //Main page
  )

Then you can use it in your style like normal:

fontFamily: 'Inter'

Note that you should put this either in the page in which you use the font, or in case you use it many pages, in your Root page / Entry point