Font Optimization

Core Idea

O módulo next/font otimiza fontes automaticamente com self-hosting embutido, removendo requests externas (privacidade e performance) e eliminando layout shift no carregamento.

Key Concepts

next/font/google: importa e self-hosta qualquer Google Font como asset estático servido do mesmo domínio do deploy; o navegador não faz request ao Google.
next/font/local: carrega arquivo de fonte local via src (path resolvido relativo ao arquivo onde localFont é chamado); fontes podem ficar em public/ ou colocalizadas em app/.
Variable fonts: recomendadas para melhor performance/flexibilidade; se a fonte não for variável, é preciso especificar weight.
Escopo de fonte: fontes são escopadas ao componente onde são usadas; para aplicar globalmente, adicionar no Root Layout via className.
src como array: permite múltiplos arquivos de uma mesma família (pesos/estilos diferentes) num único localFont.

Code Examples

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

const geist = Geist({ subsets: ['latin'] })

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

O que demonstra: aplicar Google Font variável a toda a aplicação via Root Layout.

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

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

O que demonstra: fonte não-variável exige weight explícito.

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 (peso/estilo) de uma família registrados num único localFont.

Anti-patterns

Aplicar className da fonte por página em vez do Root Layout: fragmenta o escopo desnecessariamente quando a intenção é fonte global; use o Root Layout para aplicação em toda a app.
Usar fonte não-variável sem especificar weight: comportamento inconsistente; sempre declarar weight para fontes estáticas.

Key Takeaways

next/font elimina requests de rede externas para fontes: tudo é self-hosted automaticamente.
Variable fonts são a recomendação padrão; só especifique weight quando não houver alternativa variável.
Fontes locais podem viver em qualquer lugar do projeto (inclusive dentro de app/), path resolvido relativo ao módulo que chama localFont.
Escopo de fonte segue o componente onde é declarada; Root Layout é o ponto de aplicação global.

Connects To

CSS (ch012): mesmo padrão de aplicar className no Root Layout usado para estilos globais.
Image Optimization (ch013): princípio irmão de self-hosting/otimização automática de asset estático.