CSS @ font-face no funciona con Firefox, pero funciona con Chrome e IE

El siguiente código funciona en Google Chrome beta, así 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 demasiado amigable con las importaciones entre dominios.

Pero todo esto es solo HTML estático y no se trata de dominio cruzado.

En mi landing-page.html hago una importación 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 de 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?

EJECUCIÓN LOCAL DEL SITIO (file:/// )

Firefox viene con una file:///política muy estricta de "origen de archivo uri" ( ) de forma predeterminada: para que se comporte igual que otros navegadores, vaya a about:config, filtre fileuriy alterne la siguiente preferencia:

security.fileuri.strict_origin_policy

Establézcalo 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 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 de dominio cruzado: no debería, ya que está especificando rutas relativas, pero lo probarí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 su tipo de letra, feo, pero también puede funcionar.

Una buena recapitulación está disponible aquí

Además de agregar lo siguiente a su .htaccess: (gracias @Manuel)

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

Es posible que desee intentar agregar explícitamente los tipos mime de fuente web al archivo .htaccess ... de esta manera:

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 los webfonts 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

También tuve este problema. Encontré la respuesta aquí: http://www.dynamicdrive.com/forums/showthread.php?t=63628

Este es un ejemplo de la solución que funciona en Firefox, debe agregar esta línea a su fuente cara css:

src: local(font name), url("font_name.ttf");

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 en cualquier otro lugar".

El problema era solo que Firefox se equivocó con la declaración de la familia de fuentes, esto terminó por solucionarlo:

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 esté apuntando con la regla @ font-face. Descubrí que me faltaba un coma después de font-family: 'custom-font-family' Arial, Helvetica etcque aparecía bien en todos los navegadores, aparte de Firefox. Agregué el coma y funcionó.

Tuve exactamente el mismo problema. Tuve que crear una nueva carpeta llamada "fuentes" y ponerla en wp_content. Puedo acceder a él desde mi navegador como este http://www.example.com/wp-content/fonts/CANDY.otf

Anteriormente, la carpeta de fuentes estaba en el mismo directorio que mi archivo CSS, y la @ font-face se veía así:

@font-face { 
    font-family: CANDY;
    src: url("fonts/CANDY.otf");
}

Como mencioné anteriormente, esto no funcionaba en Firefox sino solo con Chrome. Ahora está funcionando porque utilicé una ruta absoluta:

@font-face { 
    font-family: CANDY;
    src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}

Tuve exactamente este problema al ejecutar ff4 en una mac. Tenía un servidor de desarrollo local ejecutándose y mi declaración @ font-face funcionó bien. Migré a Live y FF 'flashearía' el tipo correcto en la carga de la primera página, pero al navegar más profundo, el tipo de letra predeterminado era la hoja de estilo del navegador.

Encontré la solución al agregar la siguiente declaración a .htaccess

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

encontrado a través de

Una solución fácil que nadie ha mencionado aún es incrustar la fuente directamente en el archivo CSS utilizando la codificación base64.

Si está utilizando fontsquirrel.com, en el generador de kit de fuente de fuente elija el modo experto , desplácese hacia abajo y seleccione Codificación Base64 en Opciones de CSS : el kit de fuente descargado estará listo para enchufar y reproducir.

Esto también tiene el beneficio adicional de reducir el tiempo de carga de la página porque requiere una solicitud HTTP menos.

Mencionaría que algunas fuentes tienen problemas en Firefox si su nombre de archivo contiene caracteres específicos. Recientemente me he encontrado con un problema con la fuente 'Módulo' que tenía un nombre de archivo '237D7B_0_0'. Eliminar los guiones bajos en el nombre del archivo y actualizar el CSS para que coincida con el nuevo nombre de archivo resolvió este problema. Otras fuentes con caracteres similares no tienen este problema, lo cual es muy curioso ... probablemente un error en Firefox. Recomiendo mantener los nombres de archivo solo para caracteres alfanuméricos.

Para esta fuente en particular, debe usar la API de fuentes de Google:

http://code.google.com/webfonts/family?family=Droid+Sans

Si aún desea utilizar el generador de kits de FontSquirrel, use la opción de pirateo Smiley para eliminar los problemas de fuentes locales. Después de generar un kit, verifique que el demo.html generado funcione en Firefox. Apuesto a que sí. Ahora cárguelo en su servidor; apuesto a que también funciona allí, ya que FontSquirrel es increíble.

Sin embargo, si rompió el código del kit generado mientras lo integraba en su proyecto, use los métodos estándar de depuración: verifique los 404 y vaya línea por línea hasta que encuentre el problema. WOFF definitivamente debería funcionar en FF, por lo que es un buen lugar para comenzar.

Finalmente, si nada de esto funciona, actualice Firefox. Escribí todo esto asumiendo que estás usando lo último; pero no especificó qué versión está registrando, por lo que ese también podría ser su problema.

Intente nerfear la declaración de fuente local en su @font-face directivas.

Existe un error conocido en Firefox o en la API de fuentes de Google que impide que se usen las variantes de fuentes si la fuente se instala localmente y coincide con el nombre local definido:

http://code.google.com/p/googlefontdirectory/issues/detail?id=13

Para nerfear eficazmente la declaración local, simplemente haga que su cadena de origen local no tenga sentido. La convención generalmente aceptada para esto es usar el carácter unicode sonriente ( "☺"). ¿Por qué? Paul Irish tiene una gran explicación en su blog:

http://paulirish.com/2010/font-face-gotchas/#smiley

¿Está probando esto en archivos locales o fuera de un servidor web? Los archivos en diferentes directorios se consideran diferentes dominios para las reglas de dominio cruzado, por lo que si está probando localmente podría estar aplicando restricciones de dominio cruzado.

De lo contrario, probablemente sería útil señalar una URL donde se produce el problema.

Además, sugeriría mirar la consola de errores de Firefox para ver si se informan errores de sintaxis CSS u otros errores.

Además, me gustaría señalar que probablemente desee font-weight: bold en la segunda regla @ font-face.

El uso de una regla .htaccess Access Control Permitir origen no funcionó cuando me enfrenté a este problema.

En cambio, en IIS en web.config inserte el bloque system.webServer que se muestra a continuación.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

Esto funcionó como un encanto para mí. Si necesita restringir el acceso a un dominio en particular, reemplace el * con el dominio.

Estaba teniendo el mismo problema para que una fuente se muestre correctamente en Firefox. Esto es lo que encontré que funciona para mí. Agregue una barra diagonal antes del directorio que contiene la fuente en el atributo url. Aquí están mis versiones anteriores y posteriores:

B E F O R E:
   @font-face
{   font-family: "GrilledCheese BTN";
    src: url(fonts/grilcb__.ttf);
}

A F T E R:
@font-face
{   font-family: "GrilledCheese BTN";
    src: url(/fonts/grilcb__.ttf);
}

¿Notó la barra inclinada antes de 'fuentes' en la url? Esto le dice al navegador que comience en el directorio raíz y luego acceda al recurso. Al menos para mí - Problema resuelto.

Si está intentando importar fuentes externas, se enfrenta a uno de los problemas más comunes con su Firefox y otro navegador. En algún momento su fuente funciona bien en Google Chrome o en uno de los otros navegadores, pero no en todos los navegadores.

Hay muchas razones para este tipo de error, una de las principales razones detrás de este problema es la fuente previa definida. Debe agregar una palabra clave importante después del final de cada línea de código CSS de la siguiente manera:

Ejemplo:

@font-face
{
    font-family:"Hacen Saudi Arabia" !important;
    src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important;
    src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important;
    src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important;
    src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important;
}
.sample
{
    font-family:"Hacen Saudi Arabia" !important;
}

Descripción: Ingrese el código anterior en su archivo CSS o código aquí. En el ejemplo anterior, reemplace "Hacen Saudi Arabia" con su familia de fuentes y reemplace la URL según su directorio de fuentes.

Si ingresa! Important en su navegador de código CSS, céntrese automáticamente en esta sección y anule la propiedad utilizada anteriormente. Para más detalles visite: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

¿Puedes consultar con firebug si obtienes 404? Tuve problemas en el pase y descubrí que la extensión era la misma, pero linux file.ttf es diferente de file.TTF ... y funcionó con todos los navegadores, excepto firefox.

¡Deseo que ayude!

Este es un problema con la forma en que configura las rutas de su fuente. Como no inició la ruta con un "/", Firefox intentará encontrar las fuentes en función de la ruta en la que se encuentra la hoja de estilo. Así que, básicamente, Firefox está buscando su fuente en el directorio "root / css / font" en lugar de el directorio "raíz / fuente". Puede solucionarlo fácilmente moviendo la carpeta de fuentes a la carpeta css o agregando / al principio de sus rutas de fuente.

Probar esto:

@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";
}

Prueba esto....

http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/

Tuve un problema similar. ¡La página de demostración de fontsquirel funcionaba en FF pero no en mi propia página a pesar de que todos los archivos provenían del mismo dominio!

Resultó que estaba vinculando mi hoja de estilo con una URL absoluta (http://example.com/style.css), por lo que FF pensó que provenía de un dominio diferente. Cambiar mi hoja de estilo de enlace href a /style.css en su lugar arregló las cosas para mí.

Quizás su problema sea un problema de nomenclatura, específicamente con respecto al uso (o no) de espacios y guiones.

Estaba teniendo un problema similar, que pensé que había solucionado colocando el opcional comillas (') alrededor de font- / family-names, pero eso en realidad solucionó implícitamente un problema de nomenclatura.

No estoy completamente actualizado sobre la especificación CSS, y hay (al menos para mí) cierta ambigüedad en cómo los diferentes clientes interpretan las especificaciones. Además, también parece estar relacionado con las convenciones de nomenclatura PostScript, ¡pero corríjame si me equivoco!

De todos modos, como lo entiendo ahora, su declaración está utilizando una mezcla de dos posibles sabores distintos.

@font-face {
  font-family: "DroidSerif Regular";

Si considerara a Droid como el apellido real, del cual Sans y Serif son miembros, al igual que, por ejemplo, sus hijos Sans Regular o Serif Bold , entonces usa espacios en todas partes para concatenar identificadores, O elimina espacios y usa CamelCasing para familyName y guiones para subidentificadores.

Aplicado a su declaración, se vería así:

@font-face {
  font-family: "Droid Serif Regular";

O

@font-face {
  font-family: DroidSerif-Regular;

Creo que ambos deberían ser perfectamente legales, con o sin las comillas, pero he tenido un éxito mixto con eso entre varios clientes. Tal vez, algún día, tenga algo de tiempo para descubrir los detalles de este / estos isseu / s.

Este artículo me pareció útil para comprender algunos de los aspectos involucrados: http://mathiasbynens.be/notes/unquoted-font-family

Este artículo tiene más detalles sobre PostScript específicamente, y algunos enlaces a un PDF de especificación de Adobe: http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/

No es necesario perder el tiempo con la configuración, solo elimine las comillas y los espacios de la familia de fuentes:

esta

body {font-family: "DroidSerif Regular", serif; }

se convierte en esto

body {font-family: DroidSerifRegular, serif; }

En mi caso, tuve problemas al insertar el código de estilo de fuente

<style type="text/css">
@font-face { 
font-family: 'Amazone';font-style: normal; 
/*font-weight:100; -webkit-font-smoothing: antialiased; font-smooth:always;*/ 
src: local('Amazone'), url(font/Amazone.woff) format('woff');} 
</style>

directamente en el encabezado de su página index.html o php, en la etiqueta de estilo. ¡Funciona para mi!

Debido a que este es uno de los mejores resultados de Google para este problema, me gustaría agregar lo que resolvió este problema para mí:

Tuve que eliminar el formato (opentype) del src de la fuente, luego funcionó también en Firefox. Funcionó bien en Chrome y Safari antes de eso.

Puede ser que no sea por su código, es por su configuración de Firefox.

Prueba esto de Tool bar Western a Unicode

View > Text Encoding > Unicode

Tuve el mismo problema y lo resolví agregando meta para contenido:

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

Esto sucede en Firefox y Edge si tiene textos Unicode en su html.

No sé cómo creó la sintaxis, ya que nunca usé svg en la declaración de fuente, pero Font Squirel tiene una herramienta realmente buena para crear una sintaxis a prueba de balas con solo una fuente.

http://www.fontsquirrel.com/fontface/generator

También podría ser el uso de la URL en la ruta de la etiqueta font-face. Si usa "http://dominio.com" no funciona en Firefox, para mí cambiarlo a "http://www.domain.com" funcionó.

Mi problema fue que Windows nombró la fuente 'font.TTF' y Firefox esperaba 'font.ttf'. Vi que después de abrir mi proyecto en Linux, cambié el nombre de la fuente a nombre propio y todo funciona