Looking for a nice way to change the look of my Blog headline, I decided to go
go with embedding font. There are great resources to be found on that, for
example take a look at the html5 boilerplate,
or the tutorials on html5rocks. In essence the
code looks like this
https://gist.github.com/701088.js
The Problem on using this on Tumbler is that the fonts have to be hosted
somewhere different than the theme, to me this was actually not a big Problem,
since I own a server running Nginx for serving all kinds of static content, or
at least I thought so. While working on the Template everything worked fine in
Chrome, and the new font looked good. The problem arises when doing this cross
browser, because IE as well as Firefox only accept relative URLs in the src for
the font. So while Chrome shows the font as it is supposed to Firefox and IE,
showed the fallback, even though they actually downloaded the font, but did not
use it, due to the “same origin” restriction. Poking around the net I discovered
a nice work around which works great as long as you got a server somewhere
under your own control. All the server serving the font gotta do write a HTTP
header. Using Nginx this is easily done by adding the following to the
configuration
https://gist.github.com/701102.js
That’s it from now on embedding fonts using a non relative url will work cross
browser in Firefox, Chrome, as well as IE. I found it documented for Apache
using the above code simply adapted the code for Nginx.
Code from the sideline 