CSS @font-face no funciona con Firefox, pero sí con Chrome e IE
El siguiente código funciona tanto en Google Chrome beta como en IE 7. Sin embargo, Firefox parece tener un problema con esto. Sospecho que es un problema de cómo se incluyen mis archivos CSS, porque sé que Firefox no es muy amigable con las importaciones entre dominios.
Pero todo esto es sólo HTML estático y no se trata de dominios cruzados.
En mi landing-page.html hago una importación de CSS así:
<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />
Dentro de main.css tengo otras importaciones como esta:
@import url("reset.css");
@import url("style.css");
@import url("type.css");
y dentro del type.css tengo las siguientes declaraciones:
@font-face {
font-family: "DroidSerif Regular";
src: url("font/droidserif-regular-webfont.eot");
src: local("DroidSerif Regular"),
url("font/droidserif-regular-webfont.woff") format("woff"),
url("font/droidserif-regular-webfont.ttf") format("truetype"),
url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg");
font-weight: normal; font-style: normal; }
@font-face {
font-family: "DroidSerif Bold";
src: url("font/droidserif-bold-webfont.eot");
src: local("DroidSerif Bold"),
url("font/droidserif-bold-webfont.woff") format("woff"),
url("font/droidserif-bold-webfont.ttf") format("truetype"),
url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
font-weight: normal; font-style: normal; }
body { font-family: "DroidSerif Regular", serif; }
h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }
Tengo un directorio llamado "fuente" en la misma ubicación que type.css. Este directorio de fuentes contiene todos los archivos woff/ttf/svg, etc.
Estoy perplejo con este. Funciona en Chrome e IE pero no en Firefox . ¿Cómo es esto posible? ¿Qué me estoy perdiendo?
FUNCIONANDO EL SITIO LOCALMENTE ( file:///)
Firefox viene con una file:///política muy estricta de "origen de uri de archivo" ( ) de forma predeterminada: para que se comporte como otros navegadores, vaya a about:config, filtre fileuriy alterne las siguientes preferencias:
security.fileuri.strict_origin_policy
Configúrelo en falso y debería poder cargar recursos de fuentes locales en diferentes niveles de ruta.
SITIO PUBLICADO
Según mi comentario a continuación, y usted está experimentando este problema después de implementar su sitio, podría intentar agregar un encabezado adicional para ver si su problema se configura como un problema entre dominios: no debería, ya que está especificando rutas relativas. pero lo intentaría de todos modos: en su archivo .htaccess, especifique que desea enviar un encabezado adicional para cada archivo .ttf/.otf/.eot que se solicite:
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Francamente, no esperaría que hiciera ninguna diferencia, pero es tan simple que vale la pena intentarlo: de lo contrario, intente usar la codificación base64 para el tipo de fuente, es feo pero también puede funcionar.
Un buen resumen está disponible aquí.
Además de agregar lo siguiente a tu .htaccess: (gracias @Manuel)
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Quizás quieras intentar agregar explícitamente los tipos mime de fuente web al archivo .htaccess... así:
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
Al final, mi archivo .htaccess se ve así (para la sección que permite que las fuentes web funcionen en todos los navegadores)
# BEGIN REQUIRED FOR WEBFONTS
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
# END REQUIRED FOR WEBFONTS
Dejaré esto aquí porque mi compañero de trabajo encontró una solución para un problema relacionado con "la fuente no funciona en Firefox pero sí en cualquier otro lugar".
El problema fue simplemente que Firefox se equivocó con la declaración de familia de fuentes, esto terminó solucionándolo:
body{ font-family:"MyFont" !important; }
PD: también estaba usando html5boilerplate.
Estaba teniendo el mismo problema. Verifique su código para H1, H2 o cualquier estilo al que se dirija con la regla @font-face. Descubrí que me faltaba un coma después de font-family: 'custom-font-family' Arial, Helvetica etcque apareciera bien en todos los navegadores excepto Firefox. Agregué el coma y funcionó.
