Firefox webfonts not loading

Question

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?

Answer 1

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