next/font — font loading

bext's layout.tsx already preconnects to Google Fonts and pulls in Inter — that's the idiomatic approach. The @bext-stack/framework/next/font/google shim is a passthrough config object; it doesn't subset fonts at build time yet.

Tip

If external font CDNs are blocked by bext's default CSP (script-src 'self'), self-host the woff2 under public/vendor/fonts/ and reference it via @font-face in your route_css. This removes the external network dependency and eliminates extra DNS latency.

WIP: build-time font subsetting (the part of next/font that strips unused glyphs and self-hosts the woff2) is not implemented. The shim returns the config object so imports don't break, but the actual optimization is a no-op.

src/app/layout.tsxTSX

// layout.tsx — load Inter via the standard CSS path.
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
  />
</head>

// next/font migration shim (passthrough — returns a config object)
import { Inter } from "@bext-stack/framework/next/font/google";
const inter = Inter({ subsets: ["latin"] });
// inter.className / inter.style.fontFamily are defined; subsetting is a no-op.

next/font — font loading

Related documentation