Fonts

Core Idea

next/font self-hosts any font (Google or local) automatically, eliminando requisições externas e layout shift causado por carregamento de fonte.

Key Concepts

• next/font/google: importa e self-hosta qualquer Google Font como asset estático servido do próprio domínio (nenhuma request pro Google no browser).
• next/font/local: carrega arquivo de fonte local (.woff2 etc.) via prop src, opcionalmente um array de variantes (peso/estilo).
• Variable fonts: recomendado por padrão; se a fonte não for variável, é obrigatório especificar weight.
• Aplicação global: chamar a função de fonte e aplicar className no elemento raiz do Custom App (pages/_app).

Code Examples

import { Roboto } from 'next/font/google'
import type { AppProps } from 'next/app'

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
})

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <main className={roboto.className}>
      <Component {...pageProps} />
    </main>
  )
}

• O que demonstra: fonte não-variável exige weight explícito, aplicado globalmente via _app.

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

• O que demonstra: múltiplos arquivos de fonte local mapeados por peso/estilo em uma única família.

Anti-patterns

• Esquecer weight em fonte não-variável: sem ele o next/font/google falha, pois só variable fonts dispensam essa prop.

Key Takeaways

1. next/font sempre self-hosta, mesmo pra Google Fonts, zerando request externa.
2. Prefira variable fonts; só especifique weight quando a fonte não for variável.
3. Aplicar className no _app propaga a fonte pra toda a aplicação Pages Router.

Connects To

• ch289 Images: mesmo padrão de otimização automática de asset via componente/loader do Next.js.