Code Food Travel repeat!

Custom Font not loading / working in Tumblr

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

@font-face {
font-family: ‘fontnameregular’;
src: url(‘fontname-webfont-webfont.eot’);
}

@font-face {
font-family: ‘fontnameregular’;
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAxYABEAAAAAIpQAAQAAAAAAA[truncated]) format(‘woff’),
url(‘fontname-webfont-webfont.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
}
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

data:application/x-font-woff;charset=utf-8;base64,

Change this to

data:font/woff;base64,

Then (if you like, personally I did) take out the comma at the end of that line and get rid of

url(‘fontname-webfont-webfont.ttf’) format(‘truetype’);
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:

TUMBLR UPLOAD A STATIC FILE for them to host

Upload a static file
Use this to host small files required for custom themes (images, css, javascript). Once uploaded, files cannot be deleted or changed.

Notice
Uploading anything other than theme assets will result in an immediate banning of your account.

About Steven Chu


Hi, I'm Steven! I'm an entrepreneur, photographer and art director in New York. Follow this blog for self expression, fun, and most importantly: looking comfortable, at ease, and amazing in your photos no matter who takes them! I dedicate this to my amazing friends who have let me inadvertently turn all of our hangouts and travel photos into a never ending photoshoot of fun. The proof is in the pudding-- our photos rock. My other projects: I'm the founder of InstaTechie.com, a face-to-face tech concierge service for NYC. Book a techie to walk you through something you want to learn! My work focuses on socially engaged art projects which use technology to create access to resources for communities. Visit Steven Chu Studio (stevenchustudio.com) for branding & design work or Steven Chu (stevenchu.com) for photography projects.

3 Comments

  1. 6dmind · October 21, 2014 Reply

    Hi Steven, I am having the same problem with the fonts on Tumblr as you did. I went through your guide, but when you say I’m supposed to see something like this

    @font-face {
    font-family: ‘fontnameregular’;
    src: url(‘fontname-webfont-webfont.eot’);
    }

    @font-face {
    font-family: ‘fontnameregular’;
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAxYABEAAAAAIpQAAQAAAAAAA[truncated]) format(‘woff’),

    etc,

    I get instead something like this: i.imgur.com/Ic6sStS.png?1

    is this what I’m supposed to get? How do I use it in Tumblr’s “Edit HTML”? I don’t know almost anything about CSS or HTML BTW. I’d really appreciate your help, I’ve been struggling with this issue for days.

    • 6dmind · October 21, 2014 Reply

      Ok nevermind my question, I managed by myself when I noticed the [truncated] remark there. Thanks, your post was helpful!

      • Steven Chu · November 5, 2014 Reply

        Perfect, apologies for delayed response. Very glad you got it solved. It was really frustrating for me to figure out, so I feel your pain!

Leave a Reply

%d bloggers like this:
Read previous post:
How to Enable Download for Google+ Album photos

Strangely, the control to enable visitors to download Google+ photos is hidden in PICASAWEB settings. Wtf. Go here: https://picasaweb.google.com/lh/settings#permissions. Under...

Close