Otimização de Fontes Web: Guia Prático para Performance e Core Web Vitals

Como as fontes web afetam o LCP, CLS e a experiência do usuário

Fontes web são recursos críticos, mas frequentemente negligenciados. Quando um navegador encontra uma declaração @font-face, ele precisa baixar o arquivo antes de renderizar o texto. Se esse processo for lento, você enfrenta dois problemas principais:

1. FOIT (Flash of Invisible Text): O navegador esconde o texto até a fonte carregar, atrasando o LCP.
2. FOUT (Flash of Unstyled Text): O navegador exibe uma fonte de sistema e, ao carregar a fonte personalizada, ocorre um salto no layout, degradando o CLS.

Reduzindo o payload: WOFF2, subsetting e controle de pesos

O formato WOFF2 é o padrão ouro atual, oferecendo compressão até 30% superior ao WOFF. Para otimizar ainda mais, utilize o subsetting para remover glifos desnecessários (como caracteres cirílicos ou símbolos que seu site não usa). Ferramentas como Glyphhanger ou Font Squirrel automatizam esse processo.

Evite importar famílias inteiras. Se você só usa o peso 400 e 700, não carregue o 300, 500, 600 e 900.

Estratégias de carregamento com font-display e Preload seletivo

Use font-display: swap para garantir que o texto seja visível imediatamente.

@font-face {
  font-family: 'MinhaFonte';
  src: url('/fonts/fonte.woff2') format('woff2');
  font-display: swap;
}

O preload deve ser usado apenas para a fonte principal que aparece no topo da página (above-the-fold). O uso excessivo de <link rel="preload"> causa competição de banda, atrasando o carregamento de outros recursos críticos.

Minimizando o CLS com propriedades CSS de ajuste de fallback

Para evitar o salto de layout ao trocar a fonte, ajuste as métricas da fonte de fallback para que elas se aproximem da fonte personalizada:

body {
  font-family: 'MinhaFonte', Arial, sans-serif;
  size-adjust: 95%;
  ascent-override: 90%;
  descent-override: 10%;
  line-gap-override: 0%;
}

Auto-hospedagem vs. CDNs

Auto-hospedar fontes elimina o custo de um novo DNS lookup e conexões TLS, além de garantir conformidade com a LGPD ao evitar o envio de IPs de usuários para servidores de terceiros. Se precisar usar Google Fonts, utilize parâmetros na URL para limitar o escopo: &text=ABC... ou &display=swap.

Fontes variáveis: quando vale a pena?

Fontes variáveis consolidam múltiplos pesos em um único arquivo. Elas são excelentes se você precisa de muitos estilos, mas se o seu design usa apenas dois pesos, uma fonte estática WOFF2 pode ser mais leve.

Diagnóstico na prática

1. Chrome DevTools > Network: Filtre por ‘Font’ para ver o tempo de download.
2. Chrome DevTools > Performance: Grave o carregamento e observe a seção ‘Layout Shifts’ para identificar o CLS.
3. Lighthouse: Use o relatório para verificar o aviso ‘Ensure text remains visible during webfont load’.

FAQ

• Qual a diferença entre swap e optional? swap prioriza a visibilidade imediata (pode causar CLS), enquanto optional prioriza a estabilidade: se a fonte não carregar rápido, o navegador mantém a fonte de fallback para aquela navegação.
• Pré-carregar tudo ajuda? Não. O preload consome banda de alta prioridade. Use apenas para a fonte do título principal ou texto acima da dobra.
• Como sei se a fonte causa CLS? Use o painel ‘Performance’ do DevTools. Se houver um ‘Layout Shift’ no momento em que o texto muda de estilo, a fonte é a causa.

Referências: web.dev (Google) - Font Best Practices