Como next/font otimiza fontes?

Question

Accepted Answer

`next/font` otimiza automaticamente fontes da web para melhorar o desempenho e eliminar mudanças de layout — auto-hospedando fontes em tempo de construção e lidando com os detalhes de carregamento para você. ## Usando uma fonte Google ```tsx // app/layout.tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], // only load the character sets you need (smaller files) display: "swap", // show fallback text immediately, swap when font loads }); export default function RootLayout({ children }) { return ( {/* apply the font */} {children} ); } ``` ## O que faz automaticamente - **Auto-hospedagem** — em tempo de construção, Next baixa a fonte Google e a serve do **seu** domínio. Nenhuma solicitação para os servidores do Google em tempo de execução → mais rápido e melhor para privacidade (sem rastreamento de terceiros). - **Zero mudança de layout** — calcula as métricas da fonte alternativa para corresponder à fonte da web, portanto quando a fonte real é trocada, o texto não pula (protege CLS). - **Pré-carregamento e subconjuntos** — pré-carrega a fonte e inclui apenas os subconjuntos de caracteres especificados, reduzindo o download. - **Sem solicitação de bloqueio de renderização** — fontes fazem parte da sua construção, não uma busca externa bloqueadora. ## Fontes locais ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Por que a otimização de fontes importa Fontes são um problema clássico de desempenho e CLS: uma busca de terceiros que bloqueia a renderização de texto, depois causa um salto de layout quando a fonte carrega (FOUT/FOIT). Fazer isso bem manualmente requer `@font-face`, `font-display`, pré-carregamento e correspondência de métricas de fallback. ## Por que isso importa `next/font` automatiza toda a lista de verificação de desempenho de fonte — auto-hospedagem (velocidade + privacidade), subconjuntos e pré-carregamento (menor, mais rápido) e correspondência de métricas de fallback (sem mudança de layout) — atrás de uma importação. Remove uma otimização complicada e fácil de errar e é a forma recomendada de usar fontes Google e locais em Next.js.