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


195

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?


2
Me encuentro con este problema exacto con las directivas y fuentes generadas por FontSquirrel en este momento.
Jason

para fines de prueba, ¿puede intentar agregar las declaraciones @ font-face a su html entre <style>etiquetas y ver si tiene el mismo problema?
Chris_O

agregar una sola coma también puede resolver este problema, como: formato url ('Sans-serif') ('woff')
Farzan Balkani

Respuestas:


234

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í


Si no está trabajando localmente, entonces esto probablemente no resolverá eso, pero es posible que desee utilizar rutas basadas en la raíz en un sitio en vivo de todos modos, es decir, "/ resources / font" en lugar de las relativas como "../ fuente ", pero no sé acerca de thumblr: si puedes dar la URL del sitio, puedo echarle un vistazo.
Manuel

La declaración de fuente funciona bien en Chrome, Safari, incluso todo el camino de regreso a IE6 ... pero no en Firefox.
Jason

3
Ah, está hablando del problema infame entre dominios: puede usar su fuente en una codificación base64, o pedirle a thumblr que agregue un encabezado adicional "Access-Control-Allow-Origin" al servir fuentes.
Manuel

Entonces, ¿cuán ridículamente estricta es la política de dominio cruzado de Firefox? Al igual, el CDN y el sitio comparten el mismo dominio, solo subdominios diferentes.
Jason

1
@jason, ¿la codificación desordenada de 64 bits tampoco funciona? Funcionó para mi.
Kaushik Gopal

42

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

A mí también me funcionó. Gracias zoulodi!
James

¡Trabaja para mí como un encanto! Gracias
Moxet Jan

1
Hizo el truco para mí también. También tuve que agregar woff2: AddType font / woff2 .woff2
hdomos

17

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

3
Poner un local('name')en la font-facedeclaración solo significa "intentar cargar la fuente 'nombre' en la computadora del usuario. Si no se encuentra, cargue la fuente web". (ver los documentos de MDN ). Aún así, me alegro de que te haya funcionado. :)
henry

44
Funcionó "para usted" porque tenía la fuente instalada en su computadora. Otros usuarios no lo verán. Lo arreglaste solo para ti.
Hugo Delsing

4

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.


4

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ó.


4

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

3

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


3

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.


2
Los comentarios sobre la solución elegida mencionan la solución de codificación base64.
Kaushik Gopal

@KaushikGopal Creo que la respuesta debe haber sido editada después de que publiqué esto.
Pierre

3

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.


ESTA. MyFonts.com escupe sus archivos de fuentes nombrados de esta manera y resulta en la representación de Firefox 35 en todo tipo de formas extrañas. Cambiar el nombre de la fuente resolvió el problema.
coreyward

2

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.


En realidad, no deberías usar la API de fuentes de Google para esto. Hay un problema con Firefox que impide que se usen las variantes de fuente (cursiva, negrita, etc.) si tiene la fuente instalada localmente. La única forma de evitar esto que he encontrado es nerfear la declaración de src local con la carita sonriente (por supuesto, cualquier personaje extraño lo haría, es tan ... feliz).
Jason

Aquí hay un enlace al informe de error: code.google.com/p/googlefontdirectory/issues/detail?id=13
jason

2

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


No conocía a Paul. Se me ocurrió un nuevo método de viñetas, tendré que probar este y ver si resuelve mis problemas de tipo de letra FF.
Kaushik Gopal

[Actualización: si bien es útil, no resuelve el problema]. Sin embargo, me señalaron la solución correcta.
Kaushik Gopal

1

¿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.


Hmm .. sí David, parece que lo estoy ejecutando localmente, pero anteriormente tenía un subdirectorio dentro del mismo directorio. Entonces mi type.css se encuentra en la carpeta raíz y en el mismo lugar se encuentra la carpeta de fuentes. entonces type.css y la carpeta de fuentes están en el mismo directorio. Para estar seguro, también intenté eliminarlo del directorio y colocar directamente las fuentes. Todavía no funciona en Firefox.
Kaushik Gopal

Ahora estoy empezando a sentir que es uno de los dos: 1) algo está mal en mi codificación, si alguien ve algo del código anterior, sea tan amable de señalarlo. 2) ¿FF no trata bien @ font-face y la importación de múltiples archivos? Yo uso main.css que inturn importa @import type.css que a su vez tiene el enlace de la carpeta a las fuentes. ¿Alguna gente ligera? Por cierto, gracias por la captura de peso de fuente @David!
Kaushik Gopal

Firefox maneja múltiples importaciones muy bien. Qué versión estás usando? Depure el código usando FireBug; utiliza el proceso de eliminación. Trabajar localmente presenta problemas que pueden eliminarse de forma remota. ¡Así es como se depura!
Casey

"Los archivos en diferentes directorios se consideran dominios diferentes para las reglas entre dominios" - no, no lo son.
Mike Chamberlain

1

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.


1

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.


1

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


0

¿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!


1
Dudo mucho que sea 404 'solo en un navegador y no en otros.
Jason

@jason Un navegador puede usar un tipo de archivo diferente de otro. :)
ipalaus

Bueno, en los casos en los que me he encontrado con este problema, puedo decir al 100% que el panel de red de Firebug muestra que carga la fuente con éxito.
Jason

0

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


0

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í.


0

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/


0

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

0

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!


0

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.


0

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

0

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.


-2

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


Gracias rnaud, de hecho utilicé fontsquirrel para lo anterior :). Simplemente reformateado con pestañas y espacios para una forma legible.
Kaushik Gopal

¿Nunca has usado SVG en la declaración de fuente pero usas Font Squirrel? Entonces has usado SVG en la declaración de fuente.
Jason

1
@jason: puede optar por no usar SVG con Font Squirrel.
rossisdead

-2

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ó.


-2

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.