Font

Core Idea

next/font otimiza automaticamente fontes (Google Fonts ou locais), com self-hosting embutido: CSS e arquivos de fonte são baixados no build e servidos como asset estático, sem request externo ao Google e sem layout shift.

Key Concepts

next/font/google: importa uma Google Font como função; CSS/arquivos são baixados no build time e self-hosted, nenhuma request sai do browser para o Google.
next/font/local: carrega arquivo de fonte próprio via src (string ou array de objetos {path, weight?, style?}).
Variable fonts: preferíveis por performance/flexibilidade; dispensam especificar weight manualmente.
CSS variable method: usar variable: '--my-font' para expor a fonte como custom property CSS, útil com Tailwind ou múltiplas fontes.
subsets: obrigatório declarar quando preload (default true) está ativo, senão gera warning.

Code Examples

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

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

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

O que demonstra: uso básico de Google Font variável, aplicada via className no elemento <html>.

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

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

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

O que demonstra: múltiplas fontes expostas como CSS variables, aplicadas seletivamente via CSS (font-family: var(--font-inter)).

const roboto = localFont({
  src: [
    { path: './Roboto-Regular.woff2', weight: '400', style: 'normal' },
    { path: './Roboto-Bold.woff2', weight: '700', style: 'normal' },
  ],
})

O que demonstra: next/font/local com múltiplos arquivos de peso/estilo para a mesma família.

Reference Tables

Key	`font/google`	`font/local`	Type	Required
`src`	não	sim	String ou Array de Objetos	Sim (local)
`weight`	sim	sim	String ou Array	Obrigatório se não for variable
`style`	sim	sim	String ou Array	-
`subsets`	sim	não	Array de Strings	-
`axes`	sim	não	Array de Strings	-
`display`	sim	sim	String (default `'swap'`)	-
`preload`	sim	sim	Boolean (default `true`)	-
`fallback`	sim	sim	Array de Strings	-
`adjustFontFallback`	sim	sim	Boolean/String (default `true`/`'Arial'`)	-
`variable`	sim	sim	String	-
`declarations`	não	sim	Array de Objetos	-

Anti-patterns

Não declarar subsets com preload: true: gera warning; sempre declare os subsets desejados.
Nome de fonte com múltiplas palavras sem underscore: Roboto Mono deve ser importado como Roboto_Mono.
Usar muitas fontes: cada fonte adicional é mais um recurso que o client baixa; use com moderação.
Não usar variable fonts quando disponível: variable fonts dão melhor performance/flexibilidade e dispensam weight obrigatório.

Key Takeaways

next/font elimina requests externas de fonte e layout shift automaticamente, tanto para Google Fonts quanto fontes locais.
Prefira variable fonts; especifique weight só quando a fonte não for variável.
Use variable (CSS custom property) para aplicar fontes seletivamente ou integrar com Tailwind, em vez de só className global.
Para múltiplas fontes, centralize em app/fonts.ts e importe onde precisar, evitando preload desnecessário.

Connects To

Components (ch105): índice dos componentes built-in.
Form Component (ch107), Image Component (ch108): outros componentes de otimização automática do App Router.