Melhorando a aparência das fontes no Chrome com font-face

A renderização de fontes no navegador do Google é algo digno de pena, mesmo quando as fontes utilizadas são do serviço do mesmo, o Google Webfonts. Uma solução rápida para isso é usar Font-face, que é um recurso de CSS para incluir qualquer fonte no seu site.

Antes da alteração, com o bug

Mas para que a aparência da fonte fique perfeita, é necessário carregar o arquivo .svg antes dos demais na sua folha de estilo:

@font-face { font-family: 'chunk-webfont'; src: url('fonts/chunk-webfont.eot'); src: url('fonts/chunk-webfont.eot?#iefix') format('eot'), url('fonts/chunk-webfont.svg') format('svg'), url('fonts/chunk-webfont.woff') format('woff'), url('fonts/chunk-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; }

Com a alteração na ordem de carregamento do SVG

Para achar os arquivos da fonte que você usa, procure por "sua fonte" webfont. Ou então procure no Font Squirrel.

Dica vinda do AdTrak