Como corrigir a renderização do Google Fonts no Windows

Se você é desenvolvedor web e usa o Google Fonts em seus trabalhos, provavelmente já se deparou com um problema recorrente dos navegadores do Windows: as fontes renderizam muito mal e ficam completamente serrilhadas, na maioria das vezes, enquanto funcionam corretamente nas respectivas versões para Mac e Linux.

google-fonts-comparacao-415x169 Como corrigir a renderização do Google Fonts no Windows Tutorial
Comparação de renderização: Serrilhado (1) e como deveria ser (2)

Isso acontece porque os navegadores para Windows tem a propriedade text-rendering desabilitada por padrão, privilegiando a velocidade em detrimento da qualidade. No caso do Firefox, ela só é ativada para fontes com tamanho superior a 20px.

A solução para este problema é simples: ative o text-rendering no seu CSS para cada class que usar a fonte.

Vamos usar como exemplo a fonte Open Sans, no estilo Normal 400. Após colar o código que chama o arquivo da fonte dentro do head da página, o Google Fonts pede para que você adicione a linha font-family: ‘Open Sans’, Arial, serif; font-weight: 400; no seu arquivo de CSS. Seria assim:

google-fonts-1-415x203 Como corrigir a renderização do Google Fonts no Windows Tutorial

Agora você precisa adicionar a propriedade text-rendering: optimizeLegibility; na mesma class. Ficará assim:

google-fonts-2-415x214 Como corrigir a renderização do Google Fonts no Windows Tutorial

O text-rendering: optimizeLegibility não fará efeito no Windows XP SP1 ou anterior porque o sistema não é compatível com esta renderização, mas isso não é motivo para preocupação. De acordo com dados de maio de 2013 da StatCounter, quase 75% dos usuários brasileiros de internet tem o Windows 7 ou 8 instalados no computador — porcentagem maior do que a média global.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *