Como otimizar o carregamento de fontes

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.

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.

Conteúdo da biblioteca de Diego Henrich. Confira as fontes citadas e valide orientações que dependem da versão de uma plataforma ou serviço.