Fuentes con calidad en IE7 e IE8 usando font-face y jQuery

Este artículo fue originalmente publicado en Cristalab, un portal dónde colaboro ocasionalmente.

Si has utilizado font-face para utilizar tus propias fuentes al momento de desarrollar un sitio web, seguramente te has encontrado con el inconveniente de ver tus fuentes en IE7 e IE8 con una calidad muy baja y con un detallado pésimo, cuando en otros navegadores se ve suave y estilizada.

Te odio, IE

Esto es debido a un filtro que utilizan estos navegadores llamado ClearType, que se supone que ayuda a mejorar las fuentes, pero hace todo lo contrario con fuentes personalizadas.

Filtro directo al CSS

Vamos a necesitar agregar la siguiente linea al elemento que queramos que le afecte.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop);zoom:1;

Y vamos a descargar y añadir esta imagen en el directorio donde estemos modificando nuestro archivo. Aquí un ejemplo:

h2, p {
  font: 36px/44px 'OldSansBlackRegular', Arial, sans-serif;
  letter-spacing: 0;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop);
  zoom:1;
}

Filtro automático con jQuery

Primero necesitaremos descargar el siguiente archivo: IE @font-face ClearType fix V0.1

Necesitaremos la versión de jQuery 1.4 o superior y lo insertaremos de la siguiente manera.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="IEffembedfix.jQuery.js"></script>

Y para hacer el llamado lo hacemos de la siguiente manera:

$(document).ready(function(){
  $("h2, p").ieffembedfix();
});

Por último puedes cambiar los selectores "h2" y "p" de acuerdo a tus necesidades.

Fuentes con calidad en IE7 e IE8 usando font-face y jQuery

Filtro directo al CSS

Filtro automático con jQuery

Comentarios