Status do problema, junho de 2014: corrigido com o Chrome 37
Por fim, a equipe do Chrome lançará uma correção para esse problema com o Chrome 37, que será lançado ao público em julho de 2014. Veja exemplo de comparação do Chrome 35 atual estável e do Chrome 37 mais recente (pré-visualização do desenvolvimento) aqui:
Status do problema, dezembro de 2013
1.) Há NO solução adequada quando as fontes de carregamento via @import
, <link href=
ou o do Google webfont.js
. O problema é que o Chrome simplesmente solicita .woff arquivos da API do Google, que são terrivelmente renderizados. Surpreendentemente, todos os outros tipos de arquivo de fonte são renderizados com perfeição. No entanto, existem alguns truques CSS que "suavizarão" a fonte renderizada um pouco; você encontrará as soluções alternativas mais detalhadas nesta resposta.
2.) Existe uma solução real para isso ao auto-hospedar as fontes, postadas pela primeira vez por Jaime Fernandez em outra resposta nesta página do Stackoverflow, que corrige esse problema carregando fontes da web em uma ordem especial. Eu me sentiria mal simplesmente copiando sua excelente resposta, então dê uma olhada lá. Há também uma solução (não comprovada) que recomenda o uso apenas de fontes TTF / OTF, pois agora elas são suportadas por quase todos os navegadores.
3.) A equipe de desenvolvedores do Google Chrome trabalha nessa questão. Como houve várias grandes mudanças no mecanismo de renderização, obviamente há algo em andamento.
Eu escrevi uma grande postagem no blog sobre esse assunto, fique à vontade para dar uma olhada:
Como corrigir a renderização de fonte feia no Google Chrome
Exemplos reproduzíveis
Veja como está o exemplo da pergunta inicial hoje, no Chrome 29:
EXEMPLO POSITIVO:
Esquerda: Firefox 23, direita: Chrome 29
EXEMPLO POSITIVO:
Superior: Firefox 23, inferior: Chrome 29
EXEMPLO NEGATIVO: Chrome 30
EXEMPLO NEGATIVO: Chrome 29
Solução
Corrigindo a captura de tela acima com -webkit-text-stroke:
A primeira linha é o padrão, a segunda possui:
-webkit-text-stroke: 0.3px;
A terceira linha tem:
-webkit-text-stroke: 0.6px;
Então, a maneira de consertar essas fontes é simplesmente dar a elas
-webkit-text-stroke: 0.Xpx;
ou a sintaxe RGBa (por nezroy, encontrada nos comentários! Obrigado!)
-webkit-text-stroke: 1px rgba(0,0,0,0.1)
Há também uma possibilidade desatualizada : dê ao texto uma sombra simples (falsa):
text-shadow: #fff 0px 1px 1px;
Solução RGBa (encontrada no blog de Jasper Espejo):
text-shadow: 0 0 1px rgba(51,51,51,0.2);
Eu fiz um post sobre isso:
Se você deseja ser atualizado sobre esse problema, consulte a postagem do blog correspondente: Como corrigir a renderização feia da fonte no Google Chrome . Vou postar notícias se houver notícias sobre isso.
Minha resposta original:
Esse é um grande erro no Google Chrome e a equipe do Google Chrome sabe disso, consulte o relatório oficial de erros aqui . Atualmente, em maio de 2013, mesmo 11 meses após o bug ter sido relatado, ele não está resolvido. É estranho que o único navegador que atrapalha o Google Webfonts seja o navegador do Google, o Chrome (!). Mas há uma solução simples que resolverá o problema, veja abaixo a solução.
DECLARAÇÃO DA EQUIPE DE DESENVOLVIMENTO DO GOOGLE CHROME, MAIO DE 2013
Comentários oficiais do relatório de erros:
Nossa renderização de fonte do Windows está sendo ativamente trabalhada. ... Esperamos ter algo dentro de um marco ou dois com o qual os desenvolvedores possam começar a jogar. A rapidez com que ele fica estável é, como sempre, a rapidez com que podemos erradicar e queimar qualquer regressão.