I pulled my hair out for hours with this. no matter what i tried it wouldn’t load, until:
SOLUTION to Tumblr font nightmare:
3. The website is published but I don’t have access to the server (ie. Tumblr etc.)
This is where it gets tricky and took the most time (and really the reason I am writing this guide)
Ok what we are going to do is base64 encode your font file as a .woff, embed (for Chrome + Firefox) and then add some IE legacy.
Firstly you need to grab your font file and head to The FontSquirrel @fontface kit generator.
Add your font, and hit the “Expert” radio button
Keep all options as normal but under CSS: hit the Base64 Encode checkbox
Agree to the terms and hit download.
You should be presented with a zip file, the only two files you need are the CSS file (in my case and if you didn’t change the options stylesheet.css) and the EOT file.
Open up your CSS file and check out the lines, you should be presented with something like
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAxYABEAAAAAIpQAAQAAAAAAA[truncated]) format(‘woff’),
You can chuck this into your code but it won’t work, this is where I got frustrated, first thing you need to do is change your base64 encode string
In the example above it starts with
Change this to
Then (if you like, personally I did) take out the comma at the end of that line and get rid of
As I found you don’t need it, if anyone thinks im wrong please send me a message and ill update the guide.
Now copy and paste the code into your CSS file, copy your EOT file somewhere safe to link to, update the URL and you should be good to go!
Original source for solution: coderwall.com/p/v4uwyq
And if you ever wondered how to UPLOAD A FILE TO TUMBLR TO HOST:
Upload a static file
Uploading anything other than theme assets will result in an immediate banning of your account.