Search code examples
cssfont-face

firefox wont load fonts to localhost using font-face property

I'm using CSS3 font-face property on my localhost and have hosted a font on my website to be load on local webpage. It works correctly on IE and Chrome but not in Firefox. Strangely when i use a local URL it works on Firefox too. 

//Works with local URLs like http://localhost/repo/BMitra/BMitra.*
@font-face {
  font-family: "BMitra";
  src: url("http://fonts.gexek.com/repo/BMitra/BMitra.eot");
  src: local("☺"),
       url("http://fonts.gexek.com/repo/BMitra/BMitra.woff") format("woff"),
       url("http://fonts.gexek.com/repo/BMitra/BMitra.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

I thought working on local host may be the problem but i discovered that Google fonts are working correctly on local host too.

You can see this fiddle on your Firefox and (Chrome OR IE) browser to demonstrate what i mean.
http://jsfiddle.net/66QE3/1/

What am i missing ?

Solution

  • The Firefox error console says:

    downloadable font: download failed (font-family: "BMitra" style:normal 
weight:normal stretch:normal src index:1): bad URI or cross-site access
not allowed
source: http://fonts.gexek.com/repo/BMitra/BMitra.woff

    To use a downloadable font from a different domain, the server hosting the font should have cross-site access settings allowing that, see HTTP access control (CORS).