Firefox webfonts not loading

I'm having an issue with webfonts only in Firefox, all other browsers (inclu开发者_StackOverflow中文版ding 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?

---

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

---

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

---

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 &$!§%&#*

---

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.

---

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

---

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!

---

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.