Load fonts with next/font

Create each font once in the root layout, with subsets.

From next-best-practices, font.md.

Same font, two ways to load

Press Load page, then change the network.

Google Fonts <link>Bad
acme.app/invoices0 ms

Quarterly invoice summary Paid

Twelve invoices settled this quarter across three entities, reconciled against the ledger on the last business day.

$12,480.00 due today Download PDF
Paint –3rd-party –CLS –
next/font/googleGood
acme.app/invoices0 ms

Quarterly invoice summary Paid

Twelve invoices settled this quarter across three entities, reconciled against the ledger on the last business day.

$12,480.00 due today Download PDF
Paint –3rd-party –CLS – 
// app/layout.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>{children}</body>
    </html>
  )
}

// tailwind.config.js
module.exports = {
  theme: { extend: { fontFamily: { sans: ['var(--font-inter)'] } } },
}

What the options download

Toggle subsets and weights, then type your UI’s text.

Font
subsets
weight
0files preloaded
0 KBmodelled woff2
This config
Every subset

    Preview

    not preloadedsystem fallback

    font-display on a slow font

    Drag Font arrives at, then press Play.

    // lib/fonts.ts
import { Inter } from 'next/font/google'
import localFont from 'next/font/local'

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

export const brand = localFont({
  src: [
    { path: './fonts/Brand-Regular.woff2', weight: '400', style: 'normal' },
    { path: './fonts/Brand-Bold.woff2', weight: '700', style: 'normal' },
  ],
  variable: '--font-brand',
})

// components/heading.tsx
import { brand } from '@/lib/fonts'

    Why it matters, pros and cons

    Why it matters

    A Google Fonts link blocks paint on another origin. next/font self-hosts it.

    Pros

    • No runtime request to Google.
    • Size-adjusted fallback: zero layout shift.
    • One CSS variable feeds every component.

    Cons

    • Offline builds need next/font/local.
    • Every listed subset preloads, used or not.
    • User-picked fonts still load at runtime.