firefox @font-face fail with fontawesome

Question

I'm using the FontAwesome font on an OSS app I'm running and I can't seem to get past Firefox's font sanitizer.

The files are all served out the same domain, the paths are correct, and I'm using the official css from FontAwesome which works in Firefox when served via their site and the local docs.

So I must be missing something simple.

live url: 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

Are examples of Firefox's errors when I try to correct this via dev. I've tried to do full root paths /static/font and relative to the css ../font/ and it always fails with these errors for me.

Everything works in Chrome and such. It only seems Firefox hates me. I've searched through the other answers and I've got the whole series of font faces.

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

Thanks for any hints.

Answer 1

Thanks, this was a two part problem.

The second part comes first. The sample css from the fontawesome.scss uses single quotes around the paths of the various font formats. When I ran my scss builder (pyscss) on them, it stripped them. They needed to be double quotes.

Since there were no quotes, FF failed to parse the src: url(...) bit. Since it failed that it only had the src: ..eot that's meant for IE to have and it didn't work in FF.

Changing the quotes to double quotes made everything happy.

So this is my fault using pyscss and it's parser that ended up breaking the syntax for Firefox.

Thanks Matt for helping me look closer at this.

Answer 2

A) Are you sure your server has the mime types set for eot/woff/ttf/svg?? B) It looks like you're running in to a problem with the EOT. that could be explained by the fact that Firefox does not support EOTs; it uses WOFF and TTF. C) Have you tried to debug using Firebug or Firefox's native developer tools? D) Can you post your (relevant) CSS and HTML?

Answer 3

I ran into the same problem on one of my clients websites.

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

The above worked in firefox. The one below didn't work.

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

Turns out the format specifiers need to be quoted like format('svg'). Some of the css stylesheets served by the sites don't quote the format specifiers. I have experimented with the path with both single and double quotes and that didn't make any difference. So I can say that it is the problem with unquoted format specifiers rather than the double/single quoted paths.

Answer 4

In my case it was enough to place .eot/.woff/.svg/.ttf files in the same *.war file as other static content(css, png etc.) is placed. Looks like FF and IE found downloading font files from other servers dangerous.

Answer 5

I know this is coming in late, but the best option is to use font-awesome from the CDN. You will hardly run into this kind of error if you do so.

If you are referencing the font from an external file, comment out the lines:

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

and use the link from the CDN in the head instead

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

and you would be good to go.