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

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

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

Puede intentar agregar explícitamente los tipos mime de webfont al .archivo htaccess... así:

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

Al final, mi.el archivo htaccess se ve así (para la sección que permite que webfonts funcione 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

Yo también he tenido este problema. He encontrado la respuesta aquí: http://www.dynamicdrive.com/forums/showthread.php?t=63628

Este es un ejemplo de la solución que funciona en firefox, necesita agregar esta línea a su css font face:

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

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

Anteriormente, la carpeta fonts estaba en el mismo directorio que mi archivo CSS, y la cara @font se veía así:

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

Como he mencionado anteriormente, esto no estaba funcionando en Firefox, pero solo con Chrome. Ahora está funcionando porque usé un absoluto ruta:

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

Simplemente dejaré esto aquí porque mi compañero de trabajo encontró una solución para un problema relacionado "font-face no funciona en Firefox pero en todas partes".

El problema fue que Firefox se equivocó con la declaración de la familia de fuentes, esto terminó arreglándolo:

body{ font-family:"MyFont" !important; }

PD: También estaba usando html5boilerplate.

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 'Modulus' que tenía un nombre de archivo '237D7B_0_0'. Eliminar los guiones bajos en el nombre de archivo y actualizar el css para que coincida con el nuevo nombre de archivo solucionó este problema. Otras fuentes con caracteres similares no tienen este problema que es muy curioso...probablemente un error en firefox. Yo recomendaría mantener los nombres de archivo solo en caracteres alfanuméricos.

Yo estaba teniendo el mismo problema. Verifica dos veces tu código para H1, H2 o cualquier estilo al que estés apuntando con la regla @font-face. Descubrí que me faltaba un coma después de font-family: 'custom-font-family' Arial, Helvetica etc Que estaba apareciendo bien en todos los navegadores, aparte de Firefox. Añadí el coma y funcionó.

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

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

Si todavía desea utilizar el generador de kit de FontSquirrel, utilice la opción hack Smiley para eliminar los problemas de fuentes locales. Después de haber generado un kit, compruebe que la demostración generada.html funciona en FireFox. Apuesto a que sí. Ahora subirlo a su servidor bet Apuesto a que funciona allí también desde FontSquirrel es impresionante.

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 check compruebe si hay 404 y vaya línea por línea hasta encontrar el problema. WOFF definitivamente debería trabajar en FF, así que es un buen lugar para comenzar.

Finalmente, si nada de esto funciona, actualice FireFox. Escribí todo esto asumiendo que está utilizando la última versión; pero no especificó qué versión está registrando, por lo que podría ser su problema también.

Intente nerfear la declaración de origen local en sus directivas @font-face.

Hay un error conocido en Firefox o en la API de Google Font 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 nerf de manera efectiva la declaración local, simplemente haga que su cadena de origen local sea una tontería. La convención generalmente aceptada para esto es para usar un carácter unicode sonriente ("☺"). ¿Por qué? Paul Irish tiene una gran explicación en su blog:

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

Tuve exactamente este problema ejecutando ff4 en un mac. Tenía un servidor de desarrollo local en ejecución 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 es la hoja de estilo del navegador.

Encontré que la solución consistía en agregar la siguiente declaración a .htaccess

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

Encontrado vía

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

Si está usando fontsquirrel.com, en el Generador font-face Kit elija modo experto , desplácese hacia abajo y seleccione Base64 Encode bajo CSS Options - el Font-Kit descargado estará listo para plug and play.

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

¿Está probando esto en archivos locales o desde un servidor web? Los archivos en diferentes directorios se consideran dominios diferentes para las reglas de varios dominios, por lo que si realiza pruebas localmente podría estar golpeando restricciones de varios dominios.

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

También, sugiero mirar la consola de errores de Firefox para ver si se reportan errores de sintaxis CSS u otros errores.

Además, notaría que probablemente quieras font-weight: negrita en la segunda regla @font-face.

Usando un .htaccess Access Control Allow Origin rule no funcionó para mí cuando me enfrenté a este problema.

En su lugar, en IIS en la web.config inserte el sistema.El bloque del servidor web 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 * por el dominio.

Estaba teniendo el mismo problema para obtener una fuente para mostrar 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 antes y después:

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);
}

¿Observa la barra diagonal antes de 'fonts' 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.

¿Puedes comprobar con firebug si tienes algún 404? Tuve problemas en el pase y encontré que la extensión era la misma pero el archivo linux.ttf es diferente de file.TTF... y funcionó con todos los navegadores excepto Firefox.

¡Ojalá ayude!

Este es un problema con la forma en que configura las rutas de su font-face. Dado que no iniciaste la ruta con un "/", Firefox intentará encontrar la fuente basada en la ruta en la que está la hoja de estilos. Así que básicamente, Firefox está buscando su fuente en el directorio" root/css/font "en lugar del directorio" root/font". Puede solucionar esto fácilmente moviendo la carpeta de fuentes a la carpeta css o agregando un / al comienzo de sus rutas de fuentes.

Prueba 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 enlazando mi hoja de estilo con una URL absoluta (http://example.com/style.css) así que FF pensó que venía de un dominio diferente. Cambiar mi hoja de estilos vincular href a / style.css en lugar de arreglar las cosas para mí.

Tal vez 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 las comillas opcionales ( ' ) alrededor de los nombres de fuente/familia, pero eso en realidad solucionó implícitamente un problema de nomenclatura.

No estoy completamente actualizado en 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 relacionado con Convenciones de nombres PostScript, pero por favor 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 te considerar Droid la real familia-nombre, de los cuales Sans y Serif son miembros, como por ejemplo la de sus hijos Sans Regular o Serif Bold, a continuación, utilice los espacios everyhere a concatinate identificadores, O de quitar espacios y utilizar camelCasing para el familyName, y guiones para los sub-identificadores.

Aplicado a su declaración, se vería algo como esto:

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

O

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

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

He encontrado este artículo útil para entender 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 hay necesidad de perder el tiempo con la configuración simplemente elimine las comillas y los espacios de la familia de fuentes:

Esto

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

Se convierte en esto

body {font-family: DroidSerifRegular, serif; }

En mi caso, me sloved problema con la inserción de código de estilo font-face

<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 índice.página html o php, en etiqueta de estilo. ¡Funciona para mí!

Debido a que este es uno de los principales 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 font-face, luego funcionó en Firefox también. Funcionó bien en Chrome y Safari antes de eso.

Puede que no sea por tu código, sino por tu configuración de Firefox.

Prueba esto desde Tool bar Western to Unicode

View > Text Encoding > Unicode

Si está tratando de importar fuentes externas, se enfrenta a uno de los problemas más comunes con su Firefox y otros navegadores. 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 razones más grandes detrás de este problema es la fuente anterior por definición. Tienes que añadir !palabra clave importante después del final de cada línea de código CSS como abajo:

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 entras !importante en su navegador de código CSS, enfóquese 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

Tuve el mismo problema y lo resolví agregando meta para el 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 tienes textos Unicode en tu html.

No se cómo creaste la sintaxis ya que nunca usé svg en la declaración de fuentes, pero Font Squirel tiene una muy buena herramienta para crear una sintaxis a prueba de balas font-face a partir de una sola 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://domain.com" no funciona en Firefox, para mí cambiarlo a "http://www.domain.com" funcionó.

Mi problema fue que Windows nombró la fuente 'font.Fuente TTF 'y firefox expected'.ttf ' vi que después de abrir mi proyecto en linux, renombró la fuente a propper name y todo funciona