Estratégias Modernas de Carregamento de Fontes para Performance Web

As fontes web podem fazer ou quebrar a performance do seu site. Uma estratégia de fontes mal implementada leva a texto invisível, mudanças de layout e usuários frustrados. No entanto, a maioria dos desenvolvedores ainda carrega fontes como se fosse 2015—enviando arquivos massivos, ignorando recursos CSS modernos e torcendo pelo melhor.

Este artigo aborda estratégias práticas de carregamento de fontes que você pode implementar hoje: aproveitando a compressão WOFF2, controlando a renderização com font-display, fazendo subsetting de fontes de forma inteligente, usando stacks de fontes do sistema como fallbacks, pré-carregando fontes críticas e adotando fontes variáveis onde fazem sentido. Você aprenderá como equilibrar performance com tipografia enquanto melhora os Core Web Vitals.

Escolha WOFF2 e Elimine Formatos Legados

Pare de enviar múltiplos formatos de fonte. WOFF2 oferece 30% melhor compressão que WOFF e tem suporte universal de navegadores. A menos que você esteja dando suporte ao IE11, WOFF2 é tudo que você precisa.

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

Servir TTF, OTF ou WOFF junto com WOFF2 desperdiça largura de banda. Todo visitante paga uma taxa de performance por navegadores que mal existem. Converta fontes existentes usando FontSquirrel ou CloudConvert.

Controle a Renderização com font-display

O descritor font-display determina como os navegadores lidam com o intervalo entre a solicitação da fonte e a renderização:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap; /* Mostra fallback imediatamente */
}

Suas opções:

• swap: Mostra texto de fallback imediatamente, troca quando pronto (previne FOIT)
• fallback: Breve período invisível (~100ms), depois fallback
• optional: Usa a fonte apenas se disponível imediatamente
• block: Esconde texto por até 3 segundos (evite isso)

Para texto do corpo, use swap. Para fontes decorativas, considere optional. Esta única linha pode eliminar o problema de texto invisível.

Implemente Subsetting Inteligente de Fontes

A maioria dos sites envia conjuntos de caracteres completos que nunca usarão. Uma fonte Latin Extended completa pode exceder 100KB, mas seu site em português pode precisar apenas de 30KB de glifos.

Use unicode-range para dividir fontes por script:

/* Latin */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}

/* Latin Extended */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF;
}

Ferramentas como Glyphhanger analisam seu conteúdo e geram subsets otimizados. Para Google Fonts, google-webfonts-helper fornece arquivos pré-subset.

Projete Stacks Robustos de Fontes do Sistema

Fontes do sistema carregam instantaneamente e fornecem excelentes fallbacks. Um stack bem elaborado garante texto legível mesmo se as fontes customizadas falharem:

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 
               'Segoe UI', Roboto, sans-serif;
}

Combine métricas entre fontes customizadas e de fallback usando descritores CSS:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
  size-adjust: 100.5%; /* Combina métricas de fallback */
  ascent-override: 95%;
  descent-override: 25%;
}

Use Font Style Matcher para calcular esses valores e minimizar mudanças de layout.

Pré-carregue Fontes Críticas

O pré-carregamento diz aos navegadores para buscar fontes imediatamente, antes de descobri-las no CSS:

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

Considerações importantes:

• Apenas pré-carregue fontes above-the-fold
• Inclua o atributo crossorigin (obrigatório para fontes)
• Combine a URL exata da sua declaração @font-face
• Evite pré-carregar todos os subsets—isso derrota o propósito do subsetting

Combine com CSS crítico inline para máximo impacto:

<style>
  @font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-latin.woff2') format('woff2');
    font-display: swap;
  }
</style>

Considere Fontes Variáveis Estrategicamente

Fontes variáveis podem substituir múltiplos arquivos por um, mas nem sempre são menores. Uma fonte variável suportando pesos 100-900 pode ter 50KB, enquanto dois pesos estáticos totalizam 30KB.

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

/* Use qualquer peso no intervalo */
h1 { font-weight: 750; }
p  { font-weight: 425; }

Fontes variáveis se destacam quando você precisa de:

• Múltiplos pesos ou larguras
• Animações suaves entre pesos
• Tipografia responsiva que escala com o viewport

Para sites simples usando 2-3 pesos, fontes estáticas frequentemente performam melhor.

Impacto nos Core Web Vitals

O carregamento adequado de fontes melhora diretamente métricas importantes:

Largest Contentful Paint (LCP): Pré-carregamento e font-display: swap garantem que o texto renderize rapidamente, prevenindo atrasos na medição do LCP.

Cumulative Layout Shift (CLS): Combinar métricas de fonte e usar size-adjust elimina refluxos de texto perturbadores quando as fontes carregam.

First Input Delay (FID): Reduzir o payload de fontes e evitar comportamento de bloqueio de renderização mantém a thread principal responsiva.

Conclusão

O carregamento moderno de fontes não é sobre escolher uma estratégia perfeita—é sobre combinar técnicas que funcionam para suas necessidades específicas. Comece com WOFF2 e font-display: swap. Adicione subsetting e pré-carregamento para fontes críticas. Use stacks de fontes do sistema como fallbacks sólidos. Considere fontes variáveis apenas quando fornecerem benefícios claros.

Mais importante, meça o impacto. Use WebPageTest ou Lighthouse para verificar se sua estratégia de fontes melhora as métricas reais de performance. Tipografia bonita não deveria vir ao custo da experiência do usuário.

Perguntas Frequentes

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.