Haz posible el cross-domain para @font-face en Firefox 27.7.12
Haz posible el cross-domain para @font-face en Firefox
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.
Kseso
the obCSServer ᛯ 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 Kseso
Gracias de nuevo por milesima vez, eres una fuente de conocimiento (en css) sin igual.
ResponderEliminar