soy Kseso y esto EsCSS

Haz posible el cross-domain para @font-face en Firefox

Haz posible el cross-domain para @font-face en Firefox

·Por Kseso ✎ 1

El problema

Es de sobra conocido la restricción de Firefox para utilizar en la regla @font-face tipografías alojadas en otro servidor que no sea el del dominio donde se muestran.
Esto es, si la ruta indicada en la declaración src: url(ruta); de la regla @font-face apunta a un dominio distinto al que aloja la página todos los navegadores mostrarán la tipografía indicada excepto Firefox, que la ignorará.

La razón

La creencia extendida es que se debe a un fallo de Firefox o que sus desarrolladores son pelín maníaticos de la seguridad.
Nada más alejado de la realidad.
Lo que hace Firefox es atenerse a la documentación del consorcio, que es la que dicta las restricciones.

Dice la W3c en el documento "CSS Fonts Module" en el apartado correspondiente:

Same-origin restriction for fonts

Los agentes de usuario deben implementar una restricción del mismo origen al cargar las fuentes a través del mecanismo @font-face. Esta restricción limita la carga de fuentes para un documento dado a las fuentes cargadas desde el mismo origen. Fonts sólo se puede cargar a través del mismo host, el puerto y la combinación del mismo método que el documento que contiene, con el origen coincidente con el algoritmo descrito en la [HTML5] especificación. El origen de la hoja de estilos que contiene @font-face no se utiliza para decidir si una fuente es del mismo origen o no, sólo se utiliza el origen del documento que la contiene. La restricción se aplica a todos los tipos de fuentes.

Traducciendo lo anterior. Estas son las restricciones marcadas. Supón un documento alojado en http://midominio.com/page.html

/* cross origin, diferente protocolo */ src: url(https://midominio.com/fonts/simple.ttf); /* cross origin, diferente dominio (los subdominios cuentan como tal) */ src: url(http://subdominio.midominio.com/fonts/simple.ttf); /* cross origin, diferente dominio */ src: url(http://otrodominio.com/fonts/simple.ttf);

La solución

Access-Control-Allow-Origin

Si se tiene acceso al dominio donde están alojados los archivos tipográficos sólo es cuestión de añadir al archivo .htaccess de ese directorio:

<FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch>

Recuerda que el archivo .htaccess con esta cabecera hay que colocarlo en el mismo directorio que las tipografías que se van a utilizar.

La alternativa

Tipografía en base64

Si no puedes utilizar lo anterior, tienes otra opción. Codificar la fuente tipográfica en base64:

Si usas el generador de fontsquirrel sólo es cuestión de seleccionar la opción Expert y marcar el checkbox Base64 Encode Embed font in CSS

Créditos y reconocimientos

Este artículo está elaborado gracias a:

"Cross domain workaround for @font-face and Firefox" por Geoff Evason
"Firefox doesn’t allow cross-domain fonts" por Catalin Rosu

Te aconsejo que consultes los originales.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso