/ Dicas

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](https://netmundo.com.br/wp-content/uploads/2014/02/font-face-chrome-bug-750x379.jpg)](https://netmundo.com.br/wp-content/uploads/2014/02/font-face-chrome-bug.jpg)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](https://netmundo.com.br/wp-content/uploads/2014/02/font-face-fixed-750x402.jpg)](https://netmundo.com.br/wp-content/uploads/2014/02/font-face-fixed.jpg)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](http://www.fontsquirrel.com/tools/webfont-generator).

Dica vinda do AdTrak

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