@font-face: bug de ie9 en la sintaxis y su corrección

[kseso?]

En estos momentos, multitud de páginas (mayoritariamente en inglés) se están haciendo eco de un bug de ie9 en la lectura de la ruta a su archivo .eot que hace que no muestre la fuente declarada en la regal @font-face.
Así mismo, también recogen la solucción al mismo.

Basta con añadir un # al final de la extensión .eot, de tal manera que quedaría así:

@font-face {
font-family: 'miFuente';
src: url('miFuente.eot#') format('embedded-opentype');
src: local('♥'),
url('miFuente.woff') format('woff'),
url('miFuente.ttf') format('truetype'),
url('miFuente.svg#codigosvg') format('svg');
}

Explicación un poco más detallada en español aquí y la fuente origen (en inglés) aquí

[sanxuan]

En estos momentos, no tengo constancia de que IE9 sea otra cosa que una versión beta. Hacer correcciones a un error sin que haya salido la versión definitiva me parece exagerar algo las cosas. No le encuentro la utilidad. Hay gente que se aburre mucho.

[kseso?]

Iniciado por sanxuan

En estos momentos, no tengo constancia de que IE9 sea otra cosa que una versión beta. Hacer correcciones a un error sin que haya salido la versión definitiva me parece exagerar algo las cosas. No le encuentro la utilidad. Hay gente que se aburre mucho.

Bueno, esa es su opinión.

Pero creo que ante el mero hecho de etiquetar como inutil y gente aburrida a quien ha escrito el artículo (y la página donde ha sido publicado), así como a alguna de las personas que han dejado sus opiniones favorables en los comentarios del mismo (Paul Irish entre otros) le resta bastante valor a su opinión (a la suya, no la ellos).

De todas formas, gracias por esa opinión. Seguro que alguien la encontrará acertada y le será de ayuda.

[sanxuan]

Yo agradezco la información que nos has ofrecido. Eso sí me parece útil.
Lo que no parece de recibo es que Microsoft saque la versión definitiva de IE9 con un error de ese calibre. Creo que no les lleve mucho solucionarlo si se les ha comunicado.
Salvo que yo me equivoque y sea una nueva manera de escribir la ruta de un archivo, no creo que merezca la pena usar "trucos" para aguantar hasta la versión definitiva.
IE9 sigue en fase de prueba. Yo no lo uso ni lo usaré mientras no sea una versión definitiva.
Yo no ofrezco soporte para IE9 ni lo haré hasta que deje de ser experimental. Era por eso que tildaba de inutil el parche, por llamarlo de algún modo, no a quien descubre un método nuevo de nombrar archivos, y me reafirmo en decir que está aburrido no quien descubre errores en productos de Microsoft sino quien realiza cabriolas para sortear problemas de una versión que no está aún en el mercado.

[Tedel]

mm... ¿Seguros? Por lo que leí, IE9 no iba a necesitar EOT, iba a aceptar TTF u OTF, y quizá también SVG

[alexk]

Ya veo que si hay gente que se aburre, pero bueno ami me parece interesante... desde que lei el lanzamiento de la version beta... eh querido hacer algunas pruebas e investigar mas... al igual que con Firefox 4... pero de momento no eh tenido oportunidad... ojala un finde de estos, pero lo mas seguro es que me enterare ya cuando este disponible .....

en cuanto a EOT, igual y si arreglan el soporte, pero WOFF si que lo debe soportar segun:

IE9 también soporta las etiquetas para audio y vídeo de HTML5 y el formato de archivo tipográfico web Web Open Font Format (WOFF).[4]

http://es.wikipedia.org/wiki/Internet_Explorer_9

[kseso?]

@Tedel y @alexk
La cuestión no es si ie9 soportará otros archivos de fuentes distintos al .eot
El problema detectado, y que arregla momentáneamente, es que toma como una sola ruta todo lo que encuentra entre el primer paréntesis y el último y es lo que pide al servidor.
En el ejemplo de código que ponía en #1 el ie9 pediría al servidor un archivo llamado "miFuente"en la ruta:

Código HTML:

miFuente.eot#') format('embedded-opentype');src: local('♥'),url('miFuente.woff')format('woff'),url('miFuente.ttf') format('truetype'),url('miFuente.svg#codigosvg') format('svg')
 

y como es lógico el servido le devolverá un "no encontrado".
Esa interpretación (todo es parte de la misma url) automáticamente anula el resto de archivos (ttf, svg, woff...) que se incluyen en la declaración @font-face.

También es cierto que este bug no afecta si se utilizan otras formas de declarar la regla. Especialmente las que optan por separarla en dos: 1 para los ie y otra para los no-ie. Forma que tiene sus partidarios y sus detractores. Cada uno de ellos con sus razones.

Pero hoy por hoy, casi todo el mundo utiliza generadores en línea como el de fontsquirrel. Y estos generadores dan una declaración conjunta: todas las rutas a los diferentes archivos en una sola declaración (la conocida como Bulletproof sintaxis obra de Paul Irish) Sí, la que incluía la carita sonriente en la llamada en la ruta local.

Que por cierto, ya que estamos en ello, la src local no es soportada por android.
Que por cierto 2: Ethan Dunham (el autor del artículo en inglés que citaba al final de#1 y quien ha propuesto la solucción al bug) es quien está tras fontsquirrel.com

[alexk]

ohhhh... ya veo... interesante... igual yo suelo separar la regla pa IE, pero bueno ya veremos que pasa en la salida.

[kseso?]

Pues salió la versión definitiva y el bug sigue presente.

[Tedel]

Bueno, yo inserto Fertigo en mi web así:

@font-face /* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */
{font-family: 'Fertigo'; src: url('fertigo.eot'); src: url('fertigo.eot?iefix') format('eot'), url('fertigo.woff') format('woff'), url('fertigo.ttf') format('truetype')}