Como as fontes web impactam a performance do site

O peso invisível das fontes web

As fontes são um dos elementos mais negligenciados quando falamos de performance. Uma única família tipográfica pode adicionar 200KB a 500KB ao carregamento do site — e muitos sites usam duas ou três famílias diferentes. Quando somamos isso a conexões móveis lentas, o impacto na experiência do usuário é significativo.

O problema vai além do peso dos arquivos. O navegador precisa baixar, interpretar e renderizar as fontes antes de exibir o texto. Isso pode causar dois fenômenos indesejados: o FOIT (Flash of Invisible Text), onde o texto desaparece até a fonte carregar, e o FOUT (Flash of Unstyled Text), onde o texto aparece com uma fonte genérica e depois "pula" para a fonte correta.

Formatos de fonte: escolha o mais eficiente

Nem todos os formatos de fonte são iguais em termos de performance:

• WOFF2: o formato mais moderno e compacto, com compressão até 30% melhor que o WOFF. Suportado por todos os navegadores modernos
• WOFF: boa compatibilidade, mas arquivos maiores que WOFF2
• TTF/OTF: formatos desktop, pesados demais para web — evite usar
• EOT: formato legado do Internet Explorer, desnecessário atualmente

A recomendação é usar apenas WOFF2 e, se necessário, WOFF como fallback. Isso pode reduzir o peso das fontes em até 40% comparado com outros formatos.

Subsetting: carregue apenas o necessário

A maioria das fontes inclui caracteres para dezenas de idiomas. Se seu site é em português, você não precisa dos caracteres cirílicos, gregos ou asiáticos. O subsetting remove esses caracteres desnecessários, reduzindo drasticamente o tamanho do arquivo. Ferramentas como o Google Fonts já fazem isso automaticamente quando você seleciona o subset "latin".

Estratégias de carregamento otimizado

A forma como você carrega as fontes é tão importante quanto o formato escolhido:

• font-display: swap: exibe o texto imediatamente com uma fonte do sistema e troca quando a fonte web carrega. Elimina o FOIT
• Preload de fontes críticas: use link rel="preload" para as fontes usadas acima da dobra, priorizando seu download
• Self-hosting vs CDN: hospedar as fontes no próprio servidor elimina requisições DNS extras e dá mais controle sobre cache
• Limite o número de variações: cada peso (regular, bold, light) e estilo (normal, itálico) é um arquivo separado. Use no máximo 3-4 variações

Fontes variáveis: o futuro da tipografia web

As fontes variáveis permitem que um único arquivo contenha todos os pesos e estilos. Em vez de carregar 4 arquivos separados para regular, bold, light e itálico, você carrega apenas um. Isso pode reduzir o peso total em até 70% quando se usam múltiplas variações. Fontes como Inter, Roboto Flex e Montserrat já possuem versões variáveis.

Google Fonts: otimize o uso

O Google Fonts é a fonte web mais popular do mundo, mas seu uso padrão pode prejudicar a performance. Cada chamada ao Google Fonts envolve múltiplas requisições DNS e conexões a servidores externos. Para otimizar:

• Baixe as fontes e hospede-as localmente
• Use a tag display=swap na URL do Google Fonts
• Combine múltiplas fontes em uma única requisição
• Considere usar o google-webfonts-helper para gerar o CSS otimizado

Conclusão: fontes leves, site rápido

A otimização de fontes é uma das melhorias de performance com melhor custo-benefício. Com ações simples como usar WOFF2, limitar variações e configurar font-display, você pode reduzir significativamente o tempo de carregamento. Um site que exibe o conteúdo rapidamente mantém o visitante engajado e aumenta as chances de conversão. Análise suas fontes hoje e elimine o peso desnecessário.