4

I would like to use a custom font purchased from a type foundry on my Tumblr. The method that the foundry uses is @font-face. I uploaded the files (.eot, .svg, .ttf, and .woff) to my server, linked the stylesheet, and added the right attributes to my css. I enabled hotlinking to my Tumblr address from my server. But this didn't work either. Another user here suggested uploading the files to Tumblr directly, but I continued to get this error in the console:

(index):1 Font from origin 'http://static.tumblr.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://mysite.tumblr.com' is therefore not allowed access.

I'm unsure of how to change the Cross Origin settings on my server, and it is not my personal one so I'm not at liberty to make such changes.

Anyone with experience using custom fonts on Tumblr please share your advice on the best method.

Thanks.

drchae
  • 41
  • 2
  • 1
    Welcome to Stack Overflow! This site is mainly meant for programming questions. Feel free to check out the site tour under "help --> site tour" to learn about this site, and to get your first badge! – Jonathan Jan 07 '15 at 20:52
  • 1
    Not strictly a duplicate, but you will need to `base64` the font: http://stackoverflow.com/questions/13921876/base64-font-encoding-for-tumblr-on-firefox – mikedidthis Jan 08 '15 at 08:39
  • 1
    See [Nutty Themes' complete answer about this problem and the possible fixes](http://nutty-themes.tumblr.com/post/97597308612/an-ongoing-tutorial-series-for-those-who-already) – Ally Jan 08 '15 at 23:48

1 Answers1

0

Use link rel to add a stylesheet.

Then upload your fonts to a host where you can add a .htaccess to allow fonts to be used crossed origin.

.htaccess:

      <FilesMatch "\.(ttf|ttc|otf|eot|woff|svg)$">
      <IfModule mod_headers.c>
          Header set Access-Control-Allow-Origin "*"
      </IfModule>
  </FilesMatch>
AddType application/vnd.ms-fontobject .eot
  AddType application/octet-stream .otf .ttf

Explained here: http://blog.jiffle.net/post/31490944631/font-face-with-tumblr

I've set up my tumblr with custom fonts this way.

littlequest
  • 329
  • 2
  • 7