fonts not loading on the web

[joernroeder]

Summary:

as you're using a config plugin to add fonts they are not added to the web bundle. see https://github.com/expo/expo/issues/27562 for more info and a potential solution.

[joernroeder]

I fixed it rudimentary by adding this FontsProvider to the Providers in /app/_layout.tsx. WebFontsLoader is copied from the link I mentioned above. I didn't provide a reasonable fallback yet, if there is a loading indicator component already that may do it better.

function FontsProvider({ children }: { children: React.ReactNode }) {
  if (Platform.OS !== 'web') {
    return children;
  }

  return <WebFontsLoader fallback={<View />}>{children}</WebFontsLoader>;
}

function Providers({ children }: { children: React.ReactNode }) {
...
return (
  ...
  <ThemeProvider value={theme}>
    <FontsProvider> // <------ Added within the theme so that fallback component has access to it potentially
      <APIProvider>
      ...
      </APIProvider>
    </FontsProvider>
  </ThemeProvider>
  ...
)

[yjose]

@joernroeder I haven't tried it yet, but I think adding your font inside +html.tsx would be a good idea. You only need to add the font like the following:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:[email protected]&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">

[joernroeder]

@yjose that works if you do use fonts from google but i want to serve the same font file in the assets directory used by the native app. Font's may diverge and some custom fonts are simply not available on public repos.

see this comment which I linked above. https://github.com/expo/expo/issues/27562#issuecomment-1995955046

The solution in that thread and demonstrated above works perfectly.

[yjose]

@joernroeder I would appreciate it if you could add this solution to the font docs page.

[joernroeder]

sure. I can also go ahead and do a PR to add the font provider, we could even make the font a build var. I'll play around and come back.