How to load fonts in Next.js Tamagui Monorepo – Blancer.com Tutorials and projects

So I followed the documentation on how to load fonts in Tamagui: Configuration
and I was able to load my fonts on expo.

apps/expo/app/_layout.tsx:

// ...
import { Glegoo_400Regular, Glegoo_700Bold } from '@expo-google-fonts/glegoo'
import {
  OpenSans_400Regular,
  OpenSans_600SemiBold,
  OpenSans_700Bold,
} from '@expo-google-fonts/open-sans'
import { Nunito_400Regular, Nunito_700Bold } from '@expo-google-fonts/nunito'

export const unstable_settings = {
  // Ensure that reloading on `/user` keeps a back button present.
  initialRouteName: 'Home',
}

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync()

export default function App() {
  const [interLoaded, interError] = useFonts({
    Inter: require('@tamagui/font-inter/otf/Inter-Medium.otf'),
    InterBold: require('@tamagui/font-inter/otf/Inter-Bold.otf'),
    Glegoo: Glegoo_400Regular,
    GlegooBold: Glegoo_700Bold,
    OpenSans: OpenSans_400Regular,
    OpenSansSemiBold: OpenSans_600SemiBold,
    OpenSansBold: OpenSans_700Bold,
    Nunito: Nunito_400Regular,
    NunitoBold: Nunito_700Bold,
  })

  useEffect(() => {
    if (interLoaded || interError) {
      // Hide the splash screen after the fonts have loaded (or an error was returned) and the UI is ready.
      SplashScreen.hideAsync()
    }
  }, [interLoaded, interError])

  if (!interLoaded && !interError) {
    return null
  }

  return <RootLayoutNav />
}

// ...
}

I used Open Sans for font body in my Tamagui config and the changes were reflected on native but not on web.

packages/config/src/tamagui.config.ts:

// ...

// Expo Google Fonts for branding.
const glegooFont = createFont({
  family: 'Glegoo',
  size: {
    1: 12,
    2: 14,
    3: 16,
    4: 18,
    5: 20,
    6: 22,
  },
  weight: {
    3: '700',
  },
  face: {
    700: { normal: 'GlegooBold' },
  },
})

const openSansFont = createFont({
  family: 'OpenSans',
  size: {
    1: 12,
    2: 14,
    3: 16,
    4: 18,
    5: 20,
    6: 22,
  },
  weight: {
    2: '600',
    3: '700',
  },
  face: {
    600: { normal: 'OpenSansSemiBold' },
    700: { normal: 'OpenSansBold' },
  },
})

const nunitoFont = createFont({
  family: 'Nunito',
  size: {
    1: 12,
    2: 14,
    3: 16,
    4: 18,
    5: 20,
    6: 22,
  },
  weight: {
    3: '700',
  },
  face: {
    700: { normal: 'NunitoBold' },
  },
})

// ...

export const config = createTamagui({
  defaultFont: 'body',
  animations,
  shouldAddPrefersColorThemes: true,
  themeClassNameOnRoot: true,

  // ...
 // I used Open Sans for body
  fonts: {
    body: openSansFont, 
    heading: headingFont,
  },
  // ...

The fonts that I loaded are not being shown on the web because I haven’t successfully loaded them yet on the next.js part of the mono repo but I was wondering what is the most appropriate method to load them, as the docs: Configuration haven’t really gone into details on how I should do it.

I tried this based on the docs but it still doesn’t apply my font configs from my tamagui.config.ts in the web.
I also tried using next/google/font method to load fonts but I still haven’t been able to make it work. What additional steps should I do to make sure that my fonts are loaded in Next.js?

app/next/pages/_app.tsx:

function MyApp({ Component, pageProps }: SolitoAppProps) {
  return (
    <>
      <Head>
        <title>Tamagui • Pages Router</title>
        <meta
          name="description"
          content="Tamagui, Solito, Expo & Next.js"
        />
        <link
          rel="icon"
          href="/favicon.ico"
        />
        {/* I tried loading fonts like this in Next.js */}
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
        <link
          href="https://fonts.googleapis.com/css2?family=Glegoo:wght@400;700&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
          rel="stylesheet"
        />
        <script
          dangerouslySetInnerHTML={{
            // avoid flash of animated things on enter:
            __html: `document.documentElement.classList.add('t_unmounted')`,
          }}
        />
      </Head>
      <ThemeProvider>
        <Component {...pageProps} />
      </ThemeProvider>
    </>
  )
}