CODEWITHSUNDEEP
cssfont-face
MSmS
MSmS

Reputation: 189

@font-face doesn't work with Mozilla Firefox?

So, I've tried everything to get @font-face to work in Mozilla Firefox 3.6. The thing is that I'm pretty sure it's because I want to use @font-face on my Tumblr blog, so I upload fonts on Tumblr uploader.

@font-face {
font-family: feel_scriptregular;
src: url(http://static.tumblr.com/3fk4soa/zKcm8o1y2/feel_script.otf);
src: url(http://static.tumblr.com/3fk4soa/IyZm8o1sa/feel_script-webfont.eot?#iefix) format(embedded-opentype),
     url(http://static.tumblr.com/3fk4soa/wgFm8o1tk/feel_script-webfont.woff) format(woff),
     url(http://static.tumblr.com/3fk4soa/wlLm8o1us/feel_script-webfont.ttf) format(truetype),
     url(http://static.tumblr.com/3fk4soa/tofm8o1vl/feel_script-webfont.svg#feel_scriptregular) format(svg);
}

It doesn't work with double quotes ("), or single (') or without any and I don't know what to do anymore.. :/

Upvotes: 0

Views: 3010

Answers (2)

Charlotte Dann
Charlotte Dann

Reputation: 298

It is a crossdomain thing, you can't access static.tumblr.com from your own subdomain. I've solved this for a theme before by embedding the fonts in the css. If you go to this generator and chose the expert option you can tick the box 'Base64 Encode' and it'll work on tumblr because the .woff and .tft data are part of the css.

Upvotes: 2

DarkFighter
DarkFighter

Reputation: 253

That's crossdomain fonts problem: they must be either on the same domain or there must be HTTP-header "Access-Control-Allow-Origin"

Solution for nginx - https://gist.github.com/1131897 & https://serverfault.com/questions/186965/how-can-i-make-nginx-support-font-face-formats-and-allow-access-control-allow-o

So, just upload your fonts at your own hosting and fix your apache/nginx to servre right headers.

Upvotes: 5

Related Questions