Fontes web afetam quando o texto aparece, quanto se transfere e se o layout muda quando a fonte final substitui o fallback. O objetivo não é carregar toda família e variante cedo, mas entregar o conjunto realmente usado sem deixar texto invisível ou causar deslocamentos grandes.
1. Faça inventário de famílias e pesos
Confira folhas de estilo, arquivos .woff2, idiomas e pesos usados. Remova variantes sem uso e evite baixar duas cópias da mesma família por caminhos diferentes. Fontes locais reduzem dependências externas, mas ainda precisam de cache, compressão e política de renderização adequada.
2. Defina fallback e estratégia de exibição
Inclua família de fallback compatível e teste como o texto aparece antes da fonte carregar. font-display permite escolher o comportamento durante espera; swap mostra fallback e pode gerar mudança de métricas, enquanto outras opções têm compromissos próprios. Veja boas práticas de fontes e a seção sobre fontes web no guia de desempenho.
3. Use preload com parcimônia
Preload pode adiantar a descoberta de uma fonte crítica, mas consome prioridade e pode baixar um arquivo que nem seria usado. Precarregue somente a variante principal comprovadamente necessária, com crossorigin conforme o recurso. Não precarregue toda a família. Subconjuntos unicode e formatos modernos podem ajudar quando a implementação os suporta corretamente.
| Sintoma | Primeira revisão |
|---|---|
| Texto demora a aparecer | font-display, CSS que descobre a fonte e tamanho do arquivo |
| Conteúdo se desloca | Métricas de fallback, size-adjust e dimensões próximas |
| Muitas requisições | Pesos/variantes, subsets e duplicidade |
| Fonte concorre com conteúdo principal | Necessidade real de preload e prioridade |
4. Teste em cache frio e conexões lentas
Compare carregamento inicial e visita repetida em celular, confira texto visível, CLS e hierarquia visual. Uma fonte mais rápida mas ilegível ou com fallback muito diferente não é melhoria. Documente quais arquivos são realmente críticos.
Se a fonte parecer deslocar elementos, consulte como corrigir CLS e investigue a lentidão geral do site.