@font-face con ie

@font-face está salvándome la vida últimamente en bastantes proyectos, haciendo que mi código sea más fácil de leer por motores de búsqueda y simplificando mucho la forma que tenía de hacer web, por no hablar del ahorro de KB en imágenes que solía gastar en estos menesteres del diseño tipográfico.

El caso es que el otro día, acabando la web de Uhuru Labs me metí en mi máquina virtual de windows donde hago las pruebas en Internet Explorer. Siempre había leído que IE fue de los primeros navegadores en adoptar @font-face y siendo así le di un voto de confianza y probé a ver como quedaba la fuente en este navegador al final de la maquetación. Cual fue mi sorpresa cuando ví que no se veía la fuente, si no que estaba cargando la siguiente de la lista de fuentes colocadas en font-family.

Me puse a buscar como un loco y dí con la solución. Para variar, Internet Explorer va por el buen camino hasta que se le cruzan los cables y decide no utilizar el estandar que utilizaría todo el mundo para importar fuentes, poniendo la fuente y el formato en el que está en el campo @font-face del fichero .css. Esto por ejemplo lo entiende un navegador normal.

@font-face {

font-family: Impact;
src: url(../font/impact.ttf) format(‘truetype’);

}

No, lo que espera Internet Explorer es que el diseñador utilice un tipo de fuente casposo llamado Embedded OpenType (EOT), creado por ellos por supuesto, para hacerle la vida un poco más complicada al mundo.

Con lo que, para que los niñatos que entran en la web con Internet Explorer la vean decentemente (siento si eres uno de ellos, de verdad que lo siento mucho…) hay que poner, además de las líneas que he puesto arriba otras tantas como estas:

@font-face
{

font-family: Impact;
src: url(../font/impact.eot); /* EOT para IE */

}

Para hacer esto, previamente habremos tenido que crear el fichero .eot a partir del .ttf. Yo esto lo hago con este conversor de .ttf a .eot. Rápido, sencillo de utilizar y directo al grano. Estas miniaplicaciones me gustan mucho.

Act: Estas miniaplicaciones me gustan mucho cuando funcionan. Quito el enlace porque me he vuelto loco para averiguar que el .eot que me había generado el conversor para una web que estoy haciendo era defectuoso, con lo que no cargaba bien la fuente en ie8.

He buscado un poco y lo mejor que se puede hacer es instalarse una aplicación para windows (creada para w98!), asquerosa en cuanto a diseño pero que funciona. Genera el .eot y este se carga perfectamente desde ie8. La aplicación se llama WEFT. Una vez instalada, la aplicación hace un escaneo de las fuentes instaladas en el sistema (ojo, porque si la fuente no la tienes instalada no podrás seleccionarla) y cuando termina lanza un wizard para generar una fuente. Hay que seguir todos los pasos. Yo personalmente no se ni para que sirve la aplicación, porque pide un montón de cosas raras como en que url vas a usar la fuente y tal. Yo he puesto carlosfaria.info y todo lo demás por defecto. El .eot generado lo lee ie8 perfectamente.

Si alguien necesita ayuda con el WEFT que pregunte que estaré encantado de ayudarle.

+info: Font Face Support in IE by Webfonts.info

2 opiniones en “@font-face con ie”

  1. Hola, tengo el mismo problema que tú.
    De todos modos al entrar a la pagina de Uhuru labs no me apetece bien la tipografía en internet explore.
    Sabeis como solucionarlo?.

    Gracias de antemano.

    1. Pues la verdad es que no me he dado cuenta del fallo en Uhuru Labs. Gracias por la info.

      A ver, lo más fácil que puedes hacer es bajarte una fuente preparada para web de http://www.fontsquirrel.com y copiar como lo hacen, es decir, copia lo que te ponga en el archivo css que te proporcionan de ejemplo.

      Si no te aclaras me dices y te digo paso por paso. Pero en principio con eso te debería bastar.

      Otra cosa es que la fuente que estás intentando usar no esté optimizada para todos los navegadores. Entonces FontSquirrel otra vez al rescate. Vas a http://www.fontsquirrel.com/fontface/generator, subes tu .ttf y generas el kit para @font-face.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *