Font Optimization (next/font)

Custom fonts are one of the easiest ways to hurt a page's performance score. A naive <link> to Google Fonts adds an extra round trip to a third-party server, and until that request resolves, text either stays invisible or renders in a fallback font and then visibly "jumps" once the real font arrives. The next/font module solves both problems by downloading and self-hosting fonts as part of your build.

Note

Because next/font serves font files from your own domain instead of Google's servers, there is no request ever sent to an external origin at runtime — no extra DNS lookup, no third-party connection, and no layout tracking script involved. This is also a privacy win, since the visitor's browser never talks to Google Fonts directly.

next/font/google

For any font hosted on Google Fonts, import it directly from next/font/google. Next.js downloads the font files at build time and serves them alongside your other static assets.

app/layout.tsx

TSX

import { Inter } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
  display: 'swap',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={inter.variable}>
      <body className={inter.className}>{children}</body>
    </html>
  )
}

The variable option exposes the font as a CSS custom property (--font-inter here), which you can reference from global CSS, CSS Modules, or a CSS-in-JS theme — handy when you want the font available outside the component tree that imported it.

next/font/local

For a font you own — a licensed brand typeface, a custom variable font — next/font/local gives the same self-hosting and optimization benefits for files sitting in your project.

app/layout.tsx

TSX

import localFont from 'next/font/local'

const myFont = localFont({
  src: './fonts/MyBrandFont.woff2',
  variable: '--font-brand',
  display: 'swap',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html className={myFont.variable}>
      <body className={myFont.className}>{children}</body>
    </html>
  )
}

Automatic layout-shift prevention

Beyond self-hosting, next/font automatically computes fallback font metrics (like size-adjust) so that the space reserved for text is nearly identical whether the fallback system font or the final custom font is showing. This drastically reduces — often eliminates — the visible reflow that happens when a web font swaps in, which directly improves Cumulative Layout Shift (CLS), a Core Web Vital.

Approach	Extra network request?	Layout shift handling
`<link>` to Google Fonts	Yes, to fonts.googleapis.com	Manual, if handled at all
`next/font/google`	No — self-hosted at build time	Automatic fallback metric matching
`next/font/local`	No — served from your own assets	Automatic fallback metric matching

Tip

Use the variable option and set the class on <html> (rather than only <body>) when a component library or CSS-in-JS theme needs to read the font variable from anywhere in the tree, not just inside the layout that loaded it.

next/font self-hosts font files — including Google Fonts — at build time, so no request ever goes to an external font server at runtime.
next/font/google fetches from the Google Fonts catalog; next/font/local optimizes font files you already own.
It automatically applies fallback font metric adjustments, minimizing layout shift while the real font loads.
The variable option exposes the font as a CSS custom property usable from any styling approach.