Fontes web sem travar a página: font-display, subset e auto-hospedagem

A fonte da marca dá personalidade ao site. Mal carregada, ela também esconde o texto por alguns segundos ou faz a página pular quando finalmente aparece. Os dois problemas pioram métricas do Google e a primeira impressão do visitante.

Os dois sintomas

• Texto invisível (FOIT): o navegador espera a fonte e não mostra nada enquanto isso.
• Troca com pulo (FOUT + CLS): mostra uma fonte do sistema e, ao trocar, as palavras mudam de largura e o layout se move (CLS: por que o seu site "pula" enquanto carrega e como parar com isso).

O que fazer

1. 1.Hospede as fontes no seu domínio: evita a conexão extra com servidores de terceiros. Pacotes como o Fontsource facilitam.
2. 2.Use WOFF2 e, de preferência, fontes variáveis — um arquivo para todos os pesos.
3. 3.Faça subset: se o site é em português, não carregue alfabetos que não usa.
4. 4.`font-display: swap` para o texto aparecer imediatamente.
5. 5.Pré-carregue só a fonte principal do primeiro texto visível.
6. 6.Ajuste a fonte de fallback (size-adjust) para ter dimensões parecidas e minimizar o pulo.

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

Quantas fontes usar

Duas famílias costumam bastar: uma para títulos, outra para texto. Cada peso e estilo extra é mais um arquivo.

Faz parte do conjunto

Fontes são um dos fatores do LCP quando o maior elemento é um título — junto com a imagem principal (LCP alto por causa da imagem principal? 6 ajustes que resolvem na maioria dos sites). O checklist completo está em Checklist para chegar perto da nota 100 no PageSpeed.

Este site usa exatamente essa abordagem. Conheça Performance WPO ou fale com a gente.