Como Deixar Webfonts Mais Rápidas

1. Use WOFF2

É o formato comum mais leve. Se você ainda usa TTF ou OTF, essa é a melhoria mais fácil. Use o Gerador de Webfonts para convertê-las.

2. Remova os caracteres que você não usa

Muitas fontes trazem alfabetos que o seu site nunca exibe. O Font Subsetter mantém apenas os idiomas que você escolher. Verifique antes a licença da fonte e mantenha todos os idiomas que o seu site usa.

3. Carregue menos pesos

Cada peso e cada itálico é mais um arquivo. Muitos sites precisam apenas de regular e negrito. Procure no seu CSS os pesos que não são mais usados e remova-os.

4. Considere uma variable font

Se você usa três ou mais pesos, uma única variable font pode ser menor que vários arquivos estáticos. Você pode reduzi-la ainda mais limitando a faixa de pesos no Gerador de Webfonts.

5. Faça preload da sua fonte principal

Normalmente o navegador só encontra a fonte depois de ler o seu CSS. O preload permite que ele comece antes:

<link rel="preload" href="/fonts/brand-regular.woff2" as="font" type="font/woff2" crossorigin>

Mantenha o atributo crossorigin, mesmo no seu próprio domínio, ou o arquivo pode ser baixado duas vezes. Faça preload apenas da uma ou duas fontes usadas no topo da página.

6. Defina o font-display

Isso controla o que o visitante vê enquanto a fonte carrega. swap mostra uma fonte alternativa imediatamente, então seu texto nunca fica invisível. optional evita a troca tardia, mas conexões lentas podem não exibir a sua fonte na primeira visita.

7. Armazene as fontes em cache por muito tempo

Os arquivos de fonte raramente mudam, então deixe os navegadores guardá-los. Adicione uma versão ou um hash ao nome do arquivo e envie:

Cache-Control: public, max-age=31536000, immutable

Meça o resultado

Teste sua página no Teste de Velocidade de Página antes e depois, e compare o Largest Contentful Paint e o deslocamento de layout.