CODEWITHSUNDEEP
cssfont-face
Omid
Omid

Reputation: 4715

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 ?

Upvotes: 3

Views: 4724

Answers (2)

Richard A.
Richard A.

Reputation: 1157

I've encountered a similar problem with WOFF font formats in web applications, and it turned out that the problem was due to my server not recognising (and therefore not serving) requests for application/x-woff files.

If your site is hosted on Windows IIS, try using this tutorial: http://www.projectseven.com/tutorials/servers/iis-woff/index.htm

Otherwise, this SO question might be handy: MIME Type for WOFF Fonts

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201628

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

Upvotes: 5

Related Questions