Webfonts em navegadores e dispositivos diversos

[D2th3 3]

Olá,

 

Recentemente resolvi trabalhar com webfonts para um novo site. Escolhi a fonte PT Sans Narrow.

 

O problema é que ela apresenta um comportamento diferente para cada navegador.

 

-> Chrome 32 (win8) fica perfeito

-> Chrome Galaxy Tab fica com um negrito mais forte

-> FF 26 (win8) a fonte fica muito intensa na su expessura

-> IE 10 (win8) a fonte fica mais intensa porém menos d que no FF

-> FF Galaxy Tab também há um pouco de alteração

 

Fato é que com isso, a distribuição do menu, nunca fica padrão, sempre há mudanças de posicionamento devido a maior ou menor volume da fonte de acoro com o navegador e a experiência de leitura do texto também sofre alterações pelo mesmo motivo.

 

Solicito auxílio se existe alguma coisa a se fazer nesse caso (js, plugin, etc...) ou abandona a ideia de usar webfonts e volta traballharcom as fontes comuns.

 

Obrigado.

[xanburzum 169]

você pode gerar fontes em outros formatos (WOFF, EOT, SVG) para atender a todos os browsers e tipos de dispositivos. Já tentou usar bulletproof @font-face syntax:

 

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont.eot?#iefix') format('embedded-opentype'),
        url('myfont.woff') format('woff'),
        url('myfont.ttf') format('truetype'),
        url('myfont.svg#svgFontName') format('svg');
}

 

[D2th3 3]

Eu uso a syntax da seguinte forma:

@font-face {
	font-family: 'PT-Sans-Narrow';
	src: local('PT-Sans-Narrow'), url('/fonts/PTN57F.eot');  
	src: url('/fonts/PTN57F.eot?#iefix') format('embedded-opentype'),
	  	 url('/fonts/PTN57F.woff') format('woff'),
		 url('/fonts/PTN57F.ttf') format('truetype'), 
		 url('/fonts/PTN57F.svg#svgFontName') format('svg'); 
}

Obrigado.

[xanburzum 169]

É dependendo da fonte ela vai variar mesmo...