load fonts in NextJS

I cannot manage to load web fonts in NextJS following what it’s said here: https://www.dripsy.xyz/fonts#web-optimizations

Normally you need to load them within styles (tailwind), right?

  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url(/fonts/ibm-plex-sans-var.woff2) format('woff2');
}

But with Dripsy, DripsyProvider is in charge of it?

This my _document.tsx

       <link
            rel="preload"
            href="/fonts/Inter/Inter-Regular.ttf"
            as="font"
            crossOrigin=""
          />
          <link
            rel="preload"
            href="/fonts/Inter/Inter-bold.ttf"
            as="font"
            crossOrigin=""
          />

theme.tsx

export const fontName = 'Inter'

const webFont = (font: string) =>
  Platform.select({
    web: `${font}, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, Inter-serif`,
    default: font,
  })

const theme = makeTheme({
  colors: darkColors,
  customFonts: {
    [fontName]: {
      bold: webFont(fontName),
      default: webFont(fontName),
      normal: webFont(fontName)
    },
  },
  fonts: {
    root: fontName,
  },
  text: {
    default: {
      fontSize: 26,
    },
    body: {},
    bold: {
      fontWeight: 'bold',
    }, 
  },
})
`` `

[nandorojo]

I just put it in public and load it using CSS fontface in _document.tsx, along woth <link> tags.

[nandorojo]

I added an example to Solito with custom fonts using Dripsy, Next.js and Expo font:

npx create-solito-app@latest -t with-custom-font

You can see it here.