jsschools

next/font

Self-hosts Google and local fonts with zero layout shift and no external requests.

Since Next 13 (App Router) Spec ↗

Syntax

import { Inter } from 'next/font/google'; const inter = Inter({ subsets: ['latin'] })

Parameters

NameTypeRequiredDescription
subsets string[] No Character subsets to preload (e.g. `['latin']`).
weight / style string | string[] No Required for non-variable fonts.
display string No `font-display` value (default `swap`).

Returns

FontModule — Object with className, style, and variable.

Examples

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

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

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

// Local font
import localFont from 'next/font/local'

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

Notes

Fonts are downloaded at build time and self-hosted, so there are no runtime requests to Google and no layout shift. Use `variable` to expose a CSS variable for use with Tailwind/CSS. `next/font` is not a component but a function called at module scope (Server Component friendly).

See also