Can't seem to load custom fonts with Expo's Font.loadAsync - reactjs

Question

I'm using React Native with Expo, and it is all going well except for this one issue with custom fonts. I have my font Lobster-Regular.ttfin ./assets/fonts, and I have been trying to load it as seen in the official docs:
componentDidMount() {
Font.loadAsync({
'Lobster': require('./assets/fonts/Lobster-Regular.ttf'),
});
}
I then style my header as such:
headerText: {
color: 'white',
fontSize: 30,
fontFamily: 'Lobster'
},
All I get is
fontFamily 'Lobster' 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.
Am I missing something?

Answer 1

Yes. You are missing that the call is Font.loadAsync(). This means that it loads asynchronously. As in: It takes a while. You can't render the UI until the font has loaded. You need to do something along these lines:
import { AppLoading, Font } from 'expo'
state = {
fontsLoaded: false,
...
}
componentWillMount() {
Font.loadAsync( {
'Lobster': require('./assets/fonts/Lobster-Regular.ttf')
}
).then( () => this.setState( { fontsLoaded: true } ) )
}
render() {
if( !this.state.fontsLoaded ) {
return <AppLoading/>
}
return (
...
)
}

Answer 2

Font.loadAsync is old and proved to have unpredictable problems. now expo have rolled out new solutions here
so the correct code is now:
import {useFonts} from 'expo-font';
import AppLoading from "expo-app-loading";
let [fontsLoaded] = useFonts({
'Lobster': require('./assets/fonts/Lobster-Regular.ttf'),
});
if (!fontsLoaded) {
return <AppLoading/>;
}
...

Answer 3

install expo-font package from expo CLI because sometime expo-font version is not compatible with your expo version so,
step 1:
expo install expo-font
step 2:
class App extends React.Component {
state = {
fontLoaded: false,
};
componentDidMount() {
this.loadAssetsAsync();
}
async loadAssetsAsync() {
await Font.loadAsync({
// Load a font `Montserrat` from a static resource
MuseoSans500: require("./assets/fonts/museosans_500-webfont.ttf"),
MuseoSans700: require("./assets/fonts/museosans_700-webfont.ttf"),
});
this.setState({ fontLoaded: true });
}
render() {
if (!this.state.fontLoaded) {
return null; // render some progress indicator
}
return <AnyComponent />;
}
}

Answer 4

** react-native font in stateless function **
**step:1 import font from expo **
import * as Font from 'expo-font';
import { AppLoading } from 'expo';
*step2: require font from files *
// fetchFonts from local files type ttf
const fetchFonts = () => {
return Font.loadAsync({
'PacificoRegular': require('../assets/Pacifico/Pacifico-Regular.ttf'),
});
};
*****step3:use state *****
// state font fetch control
const [fontloaded,setfontloaded]=useState(false);
**step4: use app loaded **
if(!fontloaded){
return(
<AppLoading
startAsync={fetchFonts}
onFinish={()=>{setfontloaded(true)}}
onError={console.warn}/>
)
}
**step5:style font **
txt:{
padding:5,
fontSize:18,
fontFamily: 'PacificoRegular',
}

Answer 5

useEffect(()=>{
async function loadFonts(){
await Font.loadAsync({
'Montserrat': require("./assets/fonts/Montserrat/Montserrat-Regular.ttf"),
'Montserrat-SemiBold': require('./assets/fonts/Montserrat/Montserrat-SemiBold.ttf'),
'Montserrat-Bold': require('./assets/fonts/Montserrat/Montserrat-Bold.ttf'),
'Fascinate': require('./assets/fonts/Fascinate/Fascinate-Regular.ttf')
}).then(res=>{
console.log("FONTS LOADED!");
setLoaded(true)
}).catch(Err=>{
setLoaded(true);
console.log(Err);
});
}
loadFonts();
},[])
Load using this useEffect in your App.js file, once loaded the fonts can be used anywhere in your expo or react-native project
const Heading = (color) => {
return({fontSize:45*fontScale, fontFamily: "Montserrat-SemiBold", color, marginTop: -10, marginLeft: InitialMargin, letterSpacing: 4})
}
Make sure you are not using the style fontWeight, as it will override the fontStyle and will not apply the fontFamily to your Text.

Answer 6

Because 'startAsync' is depreacted from the component AppLoading,
we can use coustom fonts as bellow,
This code works fine.
I think <Apploading> causes no further instructions to be
performed until the font is loaded
===============================================
import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';
import React ,{useState}from 'react';
export default function App() {
const [fontLoading,setFontLoading]=useState(false);
Font.loadAsync( {
yekan:require("./myapp/fonts/byekan.ttf"),
ih:require("./myapp/fonts/ih.ttf")
}
).then( () => setFontLoading('true') )
if (!fontLoading){
return(
<AppLoading/>);
} else{
return(
do someting.....
............
)
}