firefox @ font-face falla con fontawesome

Question

Estoy usando la fuente FontAwesome en una aplicación OSS que estoy ejecutando y parece que no puedo pasar el desinfectante de fuentes de Firefox.

Todos los archivos tienen el mismo dominio, las rutas son correctas y estoy usando el CSS oficial de FontAwesome que funciona en Firefox cuando se sirve a través de su sitio y los documentos locales.

Así que me debe estar perdiendo algo simple.

url vivo: https://bmark.us

[11:39:02.945] downloadable font: invalid version tag (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:0) 
source: http://127.0.0.1:6543/static/font/fontawesome-webfont.eot @ http://127.0.0.1:6543/static/css/responsive.css 
[11:39:02.945] downloadable font: rejected by sanitizer (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:0) 
source: http://127.0.0.1:6543/static/font/fontawesome-webfont.eot @ http://127.0.0.1:6543/static/css/responsive.css 

son ejemplos de errores de Firefox cuando intento de corregir esta vía prog. Intenté hacer rutas completas de raíz/static/font y relativas a css ../font/ y siempre falla con estos errores para mí.

Todo funciona en Chrome y tal. Solo parece que Firefox me odia. He buscado a través de las otras respuestas y tengo toda la serie de caras de fuentes.

https://github.com/mitechie/Bookie/tree/develop/bookie/static/font

Gracias por cualquier insinuación.

Answer 1

A) ¿Está seguro de que su servidor tiene los tipos de mime configurados para eot/woff/ttf/svg ?? B) Parece que estás entrando en un problema con el EOT. eso podría explicarse por el hecho de que Firefox no admite EOT; usa WOFF y TTF. C) ¿Ha intentado depurar usando Firebug o las herramientas de desarrollador nativas de Firefox? D) ¿Puedes publicar tu (relevante) CSS y HTML?

Answer 2

Gracias, este fue un problema en dos partes.

La segunda parte es lo primero. El CSS de muestra de fontawesome.scss utiliza comillas simples alrededor de las rutas de los diversos formatos de fuente. Cuando ejecuté mi creador de scss (pyscss) sobre ellos, los despojó. Necesitaban ser comillas dobles.

Como no hubo comillas, FF no pudo analizar el bit src: url (...). Como falló, solo tenía el src: ... no está destinado a que IE tenga y no funcionó en FF.

Cambiar las comillas a las comillas dobles hizo que todo fuera feliz.

Así que este es mi error al utilizar pyscss y su analizador que terminó rompiendo la sintaxis de Firefox.

Gracias Matt por ayudarme a mirar más de cerca esto.

Answer 3

En mi caso fue suficiente para colocar los archivos .eot/ .woff/.svg/ .ttf en el mismo archivo .war * como otro tipo de contenido estático (css, png, etc.) se coloca. Parece que FF e IE encuentran que descargar archivos de fuentes de otros servidores es peligroso.

Answer 4

Me encontré con el mismo problema en uno de los sitios web de mis clientes.

@font-face { 
font-family: 'SourceSansProBlack'; 
    src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot'); 
    src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot') format('embedded-opentype'), 
     url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/woff') format('woff'), 
     url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/ttf') format('truetype'), 
     url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/svg') format('svg'); 
} 

Lo anterior funcionó en firefox. El de abajo no funcionó.

@font-face { 
font-family: 'SourceSansProBlack'; 
    src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot'); 
    src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot') format(embedded-opentype), 
     url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/woff') format(woff), 
     url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/ttf') format(truetype), 
     url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/svg') format(svg); 
} 

Resulta que los especificadores de formato deben citarse como formato ('svg').Algunas de las hojas de estilo CSS que sirven los sitios no citan los especificadores de formato. He experimentado con la ruta con comillas simples y dobles y eso no hizo ninguna diferencia. Así que puedo decir que es el problema con los especificadores de formato sin comillas en lugar de los caminos entre comillas dobles/únicos.

Answer 5

Sé que esto llegará tarde, pero la mejor opción es utilizar font-awesome de la CDN. Difícilmente se encontrará con este tipo de error si lo hace.

Si se hace referencia a la fuente de un archivo externo, comente todas las líneas:

@font-face { 
 
    font-family: FontAwesome; 
 
    src: url("../vendors/font-awesome/fonts/fontawesome-webfont.eot"); 
 
    src: url("../vendors/font-awesome/fonts/fontawesome-webfont.eot") format("embedded-opentype"), url("../vendors/font-awesome/fonts/fontawesome-webfont.woff2") format("woff2"), url("../vendors/font-awesome/fonts/fontawesome-webfont.woff") format("woff"), url("../vendors/font-awesome/fonts/fontawesome-webfont.ttf") format("truetype"), url("../vendors/font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular") format("svg"); 
 
    font-weight: 400; 
 
    font-style: normal 
 
}

y utilizar el enlace de la CDN en la cabeza en lugar

<head> 
 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
 
    
 
</head

y estarías listo para ir.