Melhorando renderização de fontes do Google

Estava utilizando as fontes disponíveis no Google Web Font para tornar a legibilidade do meu projeto mais interessante, entretanto encontrei um problema na renderização deles no Firefox e Chrome, sendo visto isso no Windows.

O problema estava na mal renderização das fontes, como se estivessem quebradas ou borradas e quando o texto tinha uma fonte pequena ficava impossível de ler.

A solução foi :

  1. Faça o download das fontes em TTF do Google Web Font que você escolheu;
  2. Vá ao Font Squirrel, faça upload da sua fonte TTF (modo optimal) e gere um kit @font-face;
  3. Agora edite o seu css de acordo com a sintaxe abaixo:
    @font-face {
    	font-family: 'MyWebFont';
    	src: url('webfont.eot'); /* IE9 Compat Modes */
    	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    	     url('webfont.woff') format('woff'), /* Modern Browsers */
    	     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
    	     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    	}

Com isto consegui resolver o problema de renderização e utilizar qualquer fonte do Google Web Fonts. =]

1 Comment

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s