Você está carregando fontes da forma errada (e isso está prejudicando o desempenho)

• Webfonts são um elemento visual dos sites, moldando a marca e a experiência do usuário, além de impactarem diretamente o desempenho e a acessibilidade
• Formas incorretas de carregamento de fontes causam problemas como FOUT (flash de texto sem estilo) ou FOIT (flash de texto invisível), afetando negativamente os Core Web Vitals
• O formato WOFF2 é um formato de fonte moderno e eficiente, compatível com a maioria dos navegadores atuais, e melhora o desempenho ao eliminar formatos legados desnecessários
• Estratégias de subset de fontes e preload são essenciais para reduzir transferências de dados desnecessárias e acelerar o carregamento da página
• Usar pilhas de fontes do sistema e descritores CSS ajuda a minimizar mudanças de layout (CLS) durante o carregamento das fontes e oferece uma experiência de usuário mais estável

---

Uma breve história das webfonts

As webfonts são um elemento central do design para web e da experiência do usuário, e apesar de sua importância, muita gente ainda as usa da forma errada. Abaixo está um resumo da evolução das webfonts.

• A era das “web safe”

  • No início da web, só era possível usar fontes seguras para web como Arial e Times New Roman, e fontes personalizadas eram substituídas por imagens
  • Como a renderização de fontes variava entre navegadores, era difícil manter um design consistente

• Hacks antes do @font-face: sIFR e Cufón

  • sIFR: renderizava texto dinamicamente com Flash, mas era pesado e ruim para acessibilidade
  • Cufón: convertia fontes em gráficos vetoriais via JavaScript para inserção na página, mas era lento e mantinha os problemas de acessibilidade

• O surgimento do @font-face

  • @font-face permitiu inserir fontes personalizadas com CSS, mas era complexo porque cada navegador exigia formatos diferentes (EOT, fontes SVG, TTF/OTF)
  • Problemas de licenciamento e pirataria de fontes eram comuns

• Serviços comerciais: Typekit e companhia

  • Typekit (hoje Adobe Fonts) era um serviço por assinatura que resolvia problemas de licença e compatibilidade, entregando fontes por meio de snippets JavaScript
  • O padrão de depender de scripts de terceiros continua até hoje

• Hacks de compatibilidade e soluções alternativas

  • Era necessário hospedar vários formatos ou usar correções em JavaScript para lidar com FOUT e FOIT
  • Houve tentativas de resolver a falta de glifos usando icon fonts

• Google Fonts e o boom das “fontes grátis”

  • Google Fonts trouxe praticidade ao carregamento com fontes de licença aberta oferecidas gratuitamente, mas também criou novos problemas, como possíveis violações do GDPR e carregamento lento
  • Diferentemente de fontes comerciais, difíceis de otimizar por restrições de licença, as fontes do Google Fonts podiam ser usadas livremente

Como as fontes funcionam (o básico)

Fontes não são apenas uma configuração simples de CSS, mas um elemento complexo profundamente envolvido no pipeline de renderização do navegador.

• Formatos: de TTF a WOFF2

  • TTF/OTF: formatos pesados, voltados ao desktop
  • WOFF2: formato moderno e eficiente de webfont que usa compressão Brotli, adequado para a maioria dos projetos

• Pipeline de renderização

  • O carregamento de fontes passa por etapas de registro, resolução de estilo, correspondência de fonte, cobertura de glifos, requisição, fase de exibição e decodificação e shaping
  • A configuração de font-display (swap, block, fallback, optional) determina como o texto será exibido

• Métricas

  • Métricas como ascent, descent e line gap definem altura e espaçamento da fonte
  • Ao trocar de fonte, diferenças nessas métricas podem causar mudança de layout (CLS)

• Estilos sintéticos

  • Se o navegador não encontrar o peso da fonte ou estilo solicitado, ele cria negrito falso ou itálico falso, reduzindo a qualidade
  • É possível evitar isso com font-synthesis: none;

• Cobertura de glifos

  • Uma fonte não contém todos os caracteres; glifos ausentes são renderizados com uma fonte substituta, gerando problemas de consistência
  • Use unicode-range para carregar apenas os glifos necessários

Fundamentos de desempenho e estratégia

Fontes afetam o caminho crítico de renderização, e um gerenciamento ruim pode degradar o desempenho.

• Tamanho dos arquivos

  • Uma única família tipográfica pode chegar a 800KB, desperdiçando dados ao incluir glifos desnecessários
  • Com subset de fontes, só os glifos necessários são enviados, otimizando o tamanho

• Mudança de layout

  • Diferenças de métricas entre a fonte substituta e a fonte personalizada causam CLS
  • Descritores CSS como size-adjust e ascent-override ajudam a estabilizar o layout

• Descritores CSS modernos

  • font-display: swap; exibe imediatamente a fonte substituta e oferece renderização estável
  • unicode-range permite carregar apenas os glifos necessários para determinado script

Fontes variáveis: a promessa versus a realidade

Fontes variáveis podem aumentar a eficiência ao oferecer vários estilos e pesos em um único arquivo.

• A promessa

  • Consolidar vários arquivos estáticos em um único arquivo
  • Tipografia responsiva ajustável dinamicamente conforme o tamanho da viewport

• A realidade

  • Se poucos pesos forem necessários, fontes variáveis podem ser mais pesadas
  • O suporte dos navegadores ainda é limitado em alguns eixos, e pode haver problemas de licenciamento

• Estratégia de desempenho

  • Selecionar apenas os eixos necessários e otimizar o tamanho com subset por script
  • Verificar se há benefício real em comparação com fontes estáticas

• Exemplo de uso de eixos de fonte variável em CSS

  @font-face {  
    font-family: "Acme Variable";  
    src: url("/fonts/acme-variable.woff2") format("woff2-variations");  
    font-weight: 100 900;  
    font-display: swap;  
  }  
  h1 {  
    font-family: "Acme Variable", system-ui, sans-serif;  
    font-weight: 700;  
  }  
  

Pilhas de sistema e CDN

Sem fontes personalizadas, usar uma pilha de fontes do sistema proporciona carregamento imediato e uma experiência familiar.

• Pilha de fontes do sistema

  • Uma pilha com fontes como -apple-system e Segoe UI mantém consistência entre plataformas
  • Em renderização de emoji, fontes do sistema oferecem melhor desempenho

• CDN e hospedagem de terceiros

  • Google Fonts pode implicar violação do GDPR devido a vazamento de dados
  • Com self-hosting, é possível reduzir atrasos de consulta DNS e controlar melhor o cache

Fontes substitutas e correspondência

Fontes substitutas determinam a experiência do usuário antes do carregamento da fonte personalizada, exigindo um planejamento estável.

• Projetando fontes substitutas

  • Configure x-height e largura dos caracteres de forma semelhante à fonte personalizada para minimizar CLS
  • Use font-size-adjust para ajustar o tamanho da fonte substituta

• Correspondência entre fonte personalizada e substituta

  • Escolha fontes com proporções parecidas e use ajuste de métricas para garantir estabilidade de layout
  • Priorize estabilidade e legibilidade, considerando diferenças de renderização entre plataformas

Preload e estratégias de carregamento

A estratégia de entrega de fontes impacta fortemente a experiência do usuário.

• Resultados do carregamento

  • FOIT faz o texto ficar invisível em redes lentas
  • font-display: swap; é um padrão seguro para mostrar imediatamente a fonte substituta

• Preload

  • Use <link rel="preload" as="font"> para iniciar o carregamento da fonte imediatamente
  • Cabeçalhos CORS e correspondência exata de URL são essenciais

• Early Hints (HTTP 103)

  • O servidor pode instruir o navegador a buscar fontes antes da resposta HTML, reduzindo o tempo de carregamento
  • Apenas fontes críticas devem ser indicadas para evitar desperdício de banda

• API de carregamento de fontes

  • A Font Loading API permite controle detalhado do carregamento de fontes em sites dinâmicos

Formatos de arquivo: WOFF2, WOFF, TTF e o peso do legado

WOFF2 é o formato mais eficiente para a web moderna e, na maioria dos casos, um único formato basta.

• Use apenas WOFF2 para eliminar formatos desnecessários
• Evite embedding em base64, pois isso atrapalha o cache

Icon fonts: Font Awesome e um grande erro

Icon fonts não são adequadas para a web moderna por causa de problemas de acessibilidade e desempenho.

• Ícones SVG são semânticos, flexíveis e podem ser estilizados com CSS
• Ao manter icon fonts legadas, é preciso fazer subset e planejar a migração para SVG

Além do latim: scripts não latinos, idiomas RTL e emoji

Scripts não latinos e idiomas RTL exigem shaping complexo e métricas específicas.

• Ao fazer subset, considere as características de cada script para evitar erros de renderização
• Use fontes do sistema para emoji a fim de melhorar consistência e desempenho

O futuro das webfonts: padrões em evolução e riscos modernos

Novas propriedades CSS, fontes variáveis e fontes coloridas estão avançando a tipografia na web.

• Font Loading API e Early Hints ajudam a resolver problemas de latência em SPAs
• Fontes devem ser tratadas como infraestrutura, com prioridade para desempenho e acessibilidade

Ferramentas e auditoria

O desempenho de fontes pode ser medido com ferramentas como DevTools, Lighthouse e Glyphhanger.

• Ferramentas de subset de fontes removem glifos desnecessários
• Font Style Matcher ajuda a ajustar métricas da fonte substituta

Um manifesto para lidar corretamente com fontes

Fontes não são mero enfeite, mas um elemento central da experiência do usuário e do desempenho.

• Sistema primeiro: comece com uma pilha robusta de fontes do sistema
• Subset inteligente: envie apenas os glifos necessários
• Somente WOFF2: elimine formatos legados
• Respeite scripts globais: ofereça suporte a diferentes idiomas e emoji
• Teste importa: teste em redes e dispositivos variados

Fontes devem ser tratadas como conteúdo e marca, com gestão rigorosa de desempenho e acessibilidade

[nemorize]

Nossa, fazia muito tempo que eu não ouvia esse nome, Cufón kkk