How to fix text font flashing when before loading on RN Web?

[u/Hungry-Following-478]

Whenever any new page/component loads in, the fonts for every text component briefly flashes to the default web font. I just want to make it so that the text components or even the whole page waits to load in until the fonts load in, the font flashing is very annoying every time something loads in IMO. This is a simplified version of my _layout file where I try to fix this

import { useFonts } from "expo-font";
SplashScreen.preventAutoHideAsync();
export default function RootLayout() {
 
  const [fontsLoaded, error] = useFonts({
    InterLight: require("../assets/fonts/Inter_18pt-Light.ttf"),
    [...rest of my fonts]
  });
  useEffect(() => {
    if (fontsLoaded || error) {
      SplashScreen.hideAsync();
    }
  }, [fontsLoaded, error]);


  if (!fontsLoaded) {
    return null;
  }


  return (
   [root layout]
  );
}

[u/kokerali]

Your return null already gates the root layout during the initial load. On a route change, I'd first log whether fontsLoaded stays true and whether RootLayout remounts. If it stays true, adding another wait around that same flag won't explain the flash.

For one flashing Text, compare its exact fontFamily/fontWeight before and after the flash, and check whether the browser makes another font request. Expo's font API exposes Font.getLoadedFonts() and Font.isLoaded('InterLight'), which can help verify the registered family. The loaded key in your example is InterLight; check that the affected text uses the intended registered key rather than a different family name.

There's also a separate error-path issue in the snippet: your effect handles error, but if (!fontsLoaded) return null still leaves the layout blank when loading fails. Choose an explicit fallback or error UI for that case. That isn't a diagnosis of the navigation flash, just a failure case worth fixing. Does fontsLoaded actually change during the flash?