Expo fontello don't load

Question

I'm trying to load a fontello icons in my project, but if I try to load in App.js, it send "false' and the app don't load:

 import React, {useState} from "react"; import AppLoading from "expo-app-loading"; import { ThemeProvider } from "styled-components"; import theme from "./src/globalStyles/theme"; import Routes from "./src/routes"; import { useFonts, Roboto_400Regular, Roboto_500Medium, Roboto_700Bold, } from "@expo-google-fonts/roboto"; import { Fontello } from "./assets/fonts/fontello.ttf"; export default function App() { const [fontsLoaded] = useFonts({ Roboto_400Regular, Roboto_500Medium, Roboto_700Bold, Fontello, }); console.log(fontsLoaded) if (!fontsLoaded) { return <AppLoading />; } return ( <ThemeProvider theme={theme}> <Routes /> </ThemeProvider> ); }

And if I comment the line with Fontello, it load the app but I got the following error:
fontFamily "fontello" 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.

Answer 1

Install expo-font

expo install expo-font

Create a folder called hooks where you App.js is located.

Inside hooks folder create a file called useFonts.js paste this code

useFonts.js

import * as Font from 'expo-font';
import { Roboto_400Regular } from '@expo-google-fonts/roboto';

const useFonts = async () => {
  await Font.loadAsync({
    Roboto: Roboto_400Regular,
    Fontello: require('../assets/fonts/fontello.ttf'),
    // All Other Fonts
  });
};

export default useFonts;

Then in your App.js paste this code

import React, { useState } from 'react';
import AppLoading from 'expo-app-loading';
import { ThemeProvider } from 'styled-components';

import theme from './src/globalStyles/theme';
import Routes from './src/routes';
import useFonts from './hooks/useFonts';

export default function App() {
  const [IsReady, setIsReady] = useState(false);

  const LoadFonts = async () => {
    await useFonts(); 
  };

  if (!IsReady) {
    return (
      <AppLoading
        startAsync={LoadFonts}
        onFinish={() => setIsReady(true)}
        onError={(error) => console.log(error)}
      />
    );
  }

   return (
     <ThemeProvider theme={theme}>
       <Routes />
     </ThemeProvider>
   );
}

Working Example Works on Android. Some bug in the web version.