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

0
135
visitas

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
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
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

DEIXE UMA RESPOSTA

Please enter your comment!
Please enter your name here