As fontes web ainda são o ganho de desempenho mais fácil na maioria dos sites

O padrão que continua aparecendo

Se você auditar dez sites de produção aleatórios hoje, encontrará mais ou menos a mesma situação de fontes na maioria deles:

• Seis a dez arquivos de fonte carregados na página inicial
• Todos em WOFF2 (bom), mas sem estratégia de font-display (ruim)
• Vários pesos e estilos que não são usados em nenhum lugar da página
• A pilha inteira servida a partir de um domínio de terceiros (Google Fonts, geralmente), com todo o custo de DNS, TLS e privacidade que isso implica
• Sem subconjuntos via unicode-range, então todo visitante baixa os glifos cirílicos e gregos mesmo que a página esteja em inglês

Isso não é um problema exclusivo de sites pequenos. Muitas páginas de marketing bem financiadas ainda carregam 600 KB de fontes antes que o primeiro parágrafo possa ser pintado. Depois que você começa a notar o padrão, não consegue mais deixar de vê-lo.

A correção não é exótica. É um conjunto pequeno de técnicas bem compreendidas que estão nos navegadores há anos.

Use uma fonte variável em vez de seis estáticas

Se você está carregando Inter Regular, Inter Medium, Inter SemiBold, Inter Bold e seus itálicos, está baixando aproximadamente seis vezes mais bytes do que precisa. Uma única fonte variável Inter cobre todo o eixo de peso (e inclinação, em algumas builds) em um arquivo pouco maior do que dois pesos estáticos.

A história do suporte nos navegadores está resolvida há anos — fontes variáveis funcionam em todos os lugares que importam. A hesitação restante é, em grande parte, memória muscular herdada da era das fontes estáticas.

Uma regra prática: um arquivo de fonte variável por sistema de escrita, por família. Latim em um arquivo, cirílico em outro, grego em um terceiro, carregados condicionalmente com unicode-range. É isso.

Defina um font-display sensato

O comportamento padrão quando uma fonte personalizada ainda está carregando é não mostrar nada — texto invisível — por até três segundos. Este é o pior padrão possível. Usuários veem uma página em branco e presumem que algo quebrou.

Adicione isto a toda regra @font-face:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

swap mostra a fonte de fallback imediatamente e troca para a fonte personalizada quando ela carrega. O usuário consegue ler a página desde o milissegundo zero. A contrapartida é um breve deslocamento de layout quando a troca acontece, que você mitiga com a próxima técnica.

Ajuste as métricas do fallback

Um flash de texto sem estilo só parece incômodo quando o fallback e a fonte personalizada têm métricas muito diferentes. O CSS moderno corrige isso com size-adjust, ascent-override e recursos relacionados:

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

Com as métricas do fallback ajustadas, a troca é quase imperceptível — as palavras ocupam o mesmo espaço horizontal antes e depois da chegada da fonte personalizada.

O trabalho do Google em --allow-fallback-font-metrics agora faz parte do suporte básico dos navegadores, e há uma pipeline de ferramentas (a biblioteca fontaine e similares) que calcula os números corretos para você em segundos.

Hospede você mesmo

Google Fonts é conveniente, gratuito e traz dois custos reais:

1. Um segundo handshake TLS. Mesmo com HTTP/3 e coalescência de conexões, uma origem extra raramente sai de graça.
2. Uma questão de privacidade e conformidade. Vários tribunais europeus decidiram que carregar Google Fonts a partir de fonts.gstatic.com constitui transmissão de dados pessoais (o endereço IP) para um terceiro. Hospedar você mesmo elimina completamente a questão.

A pipeline de baixar e hospedar é:

1. Obtenha o arquivo WOFF2 (build variável, se existir)
2. Reduza-o aos sistemas de escrita que seu público realmente usa
3. Sirva-o a partir da mesma origem que o restante do seu site, com um Cache-Control: max-age=31536000, immutable longo
4. Faça preload do peso mais crítico: <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

Essa é a pipeline inteira. Leva uma tarde para um site existente, e você quase nunca volta atrás.

Quando pular totalmente as fontes personalizadas

Vale dizer em voz alta: nem todo site precisa de uma fonte personalizada. A pilha de fontes do sistema agora é genuinamente bonita em todos os sistemas operacionais:

font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, sans-serif;

O peso é correto, as métricas são corretas, a renderização é ajustada para o dispositivo, e o custo em bytes transmitidos é exatamente zero. Para um site de ferramentas, um app interno, um portfólio que prioriza conteúdo ou qualquer coisa voltada a usuários em redes lentas, a pilha do sistema é a resposta correta.

<!-- tool-cta:start -->

💡 Experimente isto: Converta seus arquivos TTF ou OTF para WOFF2 moderno com CSS pronto para uso usando Webfont Generator, que é a troca de formato recomendada pela publicação.

<!-- tool-cta:end -->

O resumo honesto

Para um site pequeno típico, quatro passos cobrem toda a história de desempenho de fontes web:

1. Uma fonte variável por família e por sistema de escrita
2. font-display: swap com métricas de fallback ajustadas
3. Hospedagem própria com cabeçalhos de cache longos e um preload para o peso crítico
4. Ou pule totalmente as fontes e use a pilha do sistema

Faça isso uma vez e você recupera várias centenas de kilobytes na página inicial, ganha algumas centenas de milissegundos de desempenho percebido e remove uma dependência de terceiros no caminho. Poucas mudanças têm uma relação esforço-retorno melhor.