2011-06-30 21 views
16

Tengo un problema con webfonts solo en Firefox, todos los demás navegadores (incluido IE) funcionan perfectamente.Firefox webfonts no cargando

Mi problema es que las webfonts no se cargarán en absoluto.

He mirado esta posible solución, editar el archivo .htaccess (http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems), pero no he tenido suerte.

La única otra cosa que puedo decir es en la consola de error de Firefox me da la siguiente advertencia:

Error in parsing value for "src". Skipped to the next declaration.

es una muestra de mi código font-face aquí:

@font-face { 
    font-family:AngelinaRegular; 
    src:url(../fonts/angelina-webfont.eot); 
    src:url(../fonts/angelina-webfont.eot?iefix) format(eot), url(../fonts/angelina-webfont.woff) format(woff), url(../fonts/angelina-webfont.ttf) format(truetype), url(../fonts/angelina-webfont.svg#webfontOvuhCGpN) format(svg); 
    font-weight:normal; 
    font-style:normal; 
} 

¿Alguna idea?

Respuesta

28

En mi experiencia, Firefox es exigente con cotizaciones esperando en @font-face reglas:

@font-face { 
    font-family: AngelinaRegular; 
    src: url('../fonts/angelina-webfont.eot'); 
    src: url('../fonts/angelina-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/angelina-webfont.woff') format('woff'), 
     url('../fonts/angelina-webfont.ttf') format('truetype'), 
     url('../fonts/angelina-webfont.svg#webfontOvuhCGpN') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
+1

Esto es exactamente lo que es, gracias por toda su ayuda la ayuda. – user127181

+2

** No olvide agregar citas también en 'format()'! ** :) – m93a

0

me encuentro con el mismo problema los últimos días. encontró muchos consejos y soluciones, pero ninguno de ellos funcionó para mí. Luego utiliza la consola edifi webdeveloper (Ctrl + Shift + K) en lugar de Firebug y listo, veo el error:

[14:18:36.161] GET http://www.example.com/font/fontawesome-webfont.ttf?v=3.2.0 [HTTP/1.1 401 Authorization Required 21ms] 

sí, un error 401, debido a que la página se encuentra detrás de un .htaccess de inicio de sesión ! cuando desactivo la autorización htaccess, ¡todo funciona bien!

eso por supuesto es solo una solución y no una solución, pero, antes de que te vuelvas loco por eso, como lo hice, ten cuidado si tu sitio está detrás de un inicio de sesión htaccess. que podría ahorrar mucho tiempo;)

otro problema que puede ejecutar en: http & https si utiliza ambos protocolos en su sitio, incrustar las fuentes como esta:

src: url('//www.example.com/fonts/webfont.eot'); 

vez de esto:

src: url('http://www.example.com/fonts/webfont.eot'); 

espero que ayude a alguien. He perdido mucho tiempo debido a esto & $ §% & # *

1

Ha, me senté para las edades tratando de resolver esto - para mí, la solución estaba en llamar a cada src separado - es decir, en lugar de esto (código generado fontsquirrel):

@font-face { 
    font-family: 'comic_bookregular'; 
    src: url('comic_book-webfont.eot'); 
    src: url('comic_book-webfont.eot?#iefix') format('embedded-opentype'), 
     url('comic_book-webfont.svg#comic_bookregular') format('svg'); 
     url('comic_book-webfont.woff') format('woff'), 
     url('comic_book-webfont.ttf') format('truetype'), 

font-weight: normal; 
font-style: normal; 

} 

me hizo esto:

@font-face { 
    font-family: 'comic_bookregular'; 
    src: url('../fonts/comic_book-webfont.eot'); 
    src: url('../fonts/comic_book-webfont.eot?#iefix') format('embedded-opentype'); 
    src: url('../fonts/comic_book-webfont.svg#comic_bookregular') format('svg'); 
    src: url('../fonts/comic_book-webfont.woff') format('woff'); 
    src: url('../fonts/comic_book-webfont.ttf') format('truetype'); 

    font-weight: normal; 
    font-style: normal; 

    } 

Si nos fijamos, el código fontsquirrel tiene en realidad un ';' donde debería haber un ',' pero solo arreglar eso no ayudó. Por alguna razón, cerrar todos los src con punto y coma hizo el trabajo cuando nada más lo haría.

+0

No funcionó para mí :-( –

0

Después de fregar Stackoverflow probando cada sugerencia y no hacer que funcionen descubrí lo que estaba mal con mi código que después de la reparación, lo hizo funcionar. Había omitido las comas entre las declaraciones de fuentes.

tuve

font-family: "GiveMeTime" sans-serif; 

en lugar de

font-family: "GiveMeTime", sans-serif; 

y como funcionó en cualquier otro navegador que no se dio cuenta del error. ¡Alguien más con este problema, comprueba que no es un simple error de pila de fuentes!

1

algún problema que también experimenté varias veces es sobre configuración config gfx.downloadable_fonts.enabled que cuando se establece en falso el cliente no descargará ninguna fuente, haciendo que los webmailers con iconos de webfont sean bastante malos, como he visto con yahoo y office 365 webmails ...

0

Acabo de tener el mismo problema. El problema era una pequeña diferencia en los nombres de las fuentes. Había una tipografía diferente en el atributo de la familia de fuentes en @ font-face y la que utilicé en la clase con esta fuente. Aparentemente, los navegadores web de las computadoras son más permisivos que los de las tabletas.