0

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

Jared Farrish
  • 48,585
  • 17
  • 95
  • 104
MSmS
  • 189
  • 1
  • 4
  • 15
  • 1
    See: http://stackoverflow.com/questions/4872592/multiple-font-face-in-css/4872624#4872624 You don't actually *have* either in your code, so... Can you provide a http://jsfiddle.net? – Jared Farrish Aug 13 '12 at 00:03

2 Answers2

5

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.

Community
  • 1
  • 1
DarkFighter
  • 253
  • 2
  • 7
  • I don't understand how to do this though. – MSmS Aug 13 '12 at 01:02
  • @DarkFighter: +1, although as for the proposed solution I don't believe there is need to adjust `Access-Control-Allow-Origin` header if the files can be uploaded to be served from the same domain as the css file – Oleg Aug 13 '12 at 04:16
  • @o.v. if css-file is on the same domain as web-site - yes, there is no need to add "Access-Control-Allow-Origin" header. But in other cases - you should provide this header to Firefox. – DarkFighter Aug 13 '12 at 10:45
  • @DarkFighter: yes, I'm aware of that, just thought you'd want to make your reply clearer - *...just upload your fonts at your own hosting and fix your apache/nginx to servre right headers* sounds a lot like "host your own files **and** fix the headers" – Oleg Aug 13 '12 at 23:15
  • This is the best solution, all others are too complicated or too heavy. – f055 Sep 17 '13 at 16:44
2

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.

Charlotte Dann
  • 298
  • 2
  • 10