Closed Wepa121 closed 8 months ago
The solution is use expo-google-fonts
and load in the start of the app
1) npx expo install @expo-google-fonts/courier-prime expo-font
2) use expo-app-loading or expo-splash-screen for show loading while the font is loaded
I preferred to use the splash screen for show loading.
this code is an example using expo-router, if you are not using expo-router, you should do something very similar but in App.js/tsx
import { useCallback } from 'react';
import { Slot } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
import { useFonts, CourierPrime_400Regular } from '@expo-google-fonts/courier-prime';
SplashScreen.preventAutoHideAsync();
export default function RootLayout() {
const [fontsLoaded] = useFonts({ Courier: CourierPrime_400Regular });
const onLayoutRootView = useCallback(async () => {
if (fontsLoaded) await SplashScreen.hideAsync();
}, [fontsLoaded]);
if (!fontsLoaded) return null;
return (
<Slot screenOptions={{ onLayoutRootView }} />
);
}
fontFamily "Courier" is not a system font and has not been loaded through Font.loadAsync.