next/font — Zero Layout Shift Fonts

`next/font` downloads Google fonts at build time, self-hosts them, and applies them with a CSS variable — no layout shift, no extra request.

3 min read Level 1/5 #nextjs#font#performance

What you'll learn

Import a Google font with `next/font/google`
Apply it via className or CSS variable
Use `next/font/local` for local font files

next/font solves the two big font headaches at once: shipping the right format, and preventing layout shift when the web font replaces the fallback.

A Google Font

// app/layout.tsx
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

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

The font is downloaded at build time, self-hosted from your domain, and applied to every element under the layout.

As a CSS Variable

If you want to combine fonts or apply per-component, expose a CSS variable:

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

// in layout.tsx
<html className={inter.variable}>

Use it from CSS or Tailwind: font-family: var(--font-inter) or fontFamily: { sans: ['var(--font-inter)'] }.

Local Fonts

import localFont from 'next/font/local'

const display = localFont({
  src: './display.woff2',
  variable: '--font-display',
})

Same API, but the file lives in your repo. Useful for licensed or custom fonts.

next/script — Third-Party Scripts →