Firefox webfonts not loading

问题:

I'm having an issue with webfonts only in Firefox, all other browsers (including IE) work perfectly.

My issues is that the webfonts won't load at all.

I've looked at this possible solution, editing the htaccess file (http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems) but I've had no luck.

The only other thing that I can say is in Firefox's error console I get the following warning:

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

Here's a sample of my font-face code:

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

Any ideas?

回答1:

In my experience, Firefox is picky about expecting quotes in @font-face rules:

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

回答2:

There can also be cross domain issues with fonts in Firefox. See: http://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html

回答3:

Ha, I sat for ages trying to figure this out - for me, the fix was in calling each src separately - i.e, instead of this (fontsquirrel generated code):

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

}

I did this:

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

  }

If you look, the fontsquirrel code actually has a ';' where there should be a ',' but just fixing that didn't help. For some reason, closing all the src's with semi-colons did the job when nothing else would.

回答4:

some issue I also experienced multiple times is the about:config setting gfx.downloadable_fonts.enabled that when set to false the client wont download any fonts, making webmailers with webfont icons pretty bad, as I have seen with yahoo and office 365 webmails...

回答5:

i run into the same problem the last days. found a lot of tips and solutions, but none of them worked for me. then i used the buildin webdeveloper console (strg+shift+k) instead of firebug and voila, i see the 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]

yes, a 401 error, because the page is located behind a htaccess login! when i disable the htaccess authorization, everything works fine!

thats of course only a workaround and no solution, but, before you get crasy about that sh*t like i did, watch out if your site is behind a htaccess login. that could save you a lot of time ;)

another problem you can run into: http & https if you use both protocols on your site, embed the fonts like this:

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

instead of this:

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

hope that helps someone. i lost a lot of time because of this &$!§%&#*

回答6:

After scouring stackoverflow trying every suggestion and not having them work I found out what was wrong with my code that after fixing, made it work. I had left out the commas between font declarations.

I had

font-family: "GiveMeTime" sans-serif;

instead of

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

and as it worked in every other browser I didn't notice the error. Anyone else with this problem, check it's not a simple font stack error!

回答7:

I've just had the same problem. The problem was a slight difference in the names of the fonts. There was a different typography in the font-family attribute in @font-face and the one I used in the class using this font. Apparently, the computer web browsers are more permissive than the tablets' ones.