Embedding Fonts with CSS and Base64

Relevant XKCD

One of my other hobbies besides photography happens to be web programming. I've been doing it in one form or another for many, many years (anyone else remember the first time animated .gifs were cool?). As a hobby it has been a ton of fun, and many of the newer capabilities just make it more so.

Anyway, in case you hadn't noticed I at least took the time to use interesting and pretty font faces on this site (in my opinion). It was literally hours of agonizing over different choices, weights, faces, readability, etc. I finally settled on two main fonts for this site that I thought worked reasonably well together:
Yanone Kaffeesatz for titles, and
Philosopher for my body text.
Google web fonts is a lifesaver here!

So I'm going to skip over a history of web-safe fonts and my using them on this site. Instead, I'll talk about the new Getting Around in GIMP page.

In a nutshell, I wanted to re-design the page to be cleaner and easier for people to use (and prettier as well). One of the things I wanted to try was a neat text-shadow css effect on the headings for each section. The problem was that I wanted to use a free font that I thought would look neat: Bazar, Medium by Olinda Martins.

The problem is that nobody was hosting it for direct embedding. I tried uploading it to Google Drive and directly hotlinking to it from here, but Firefox wanted nothing to do with it. I host this blog on Blogger, and there was no way for me to upload a .ttf font file here, either.

Then it struck me like a bolt of lightning...

I have seen a url for an image be given as a data: reference with base64 encoded data being attached. I figured if it worked for image data, maybe it would work for fonts as well! (I did something similar to this with my Chrome extension Patr for downloading your list of all your photos on Flickr).

If you're not familiar, this is what a base64 encoded data URI will look like:

<img src="data:image/png;base64,<BASE64 ENCODED DATA>" />

Now, could I do the same thing when I define the URL for the font I want to embed? Yes. Yes I can!

To embed a font directly into your CSS:

@font-face{
 font-family: Bazar;
 src: url(data:font/ttf;base64,AAEA… ) format('truetype');
}

Call me a geek, but that is seriously cool. No longer do I need to worry about hosting a ttf, otf, woff, eot file somewhere and embedding it - I can embed it directly into the CSS for my page!

To illustrate what I mean, I have just inserted the Bazar font into an inline style sheet in this post. If your browser supports it, you should be seeing it rendered here:

BAZAR, MEDIUM EMBEDDED!

And if you're curious, here is the effect I wanted to use with text-shadow:

BAZAR, MEDIUM EMBEDDED!

And the obligatory embossed effect:

BAZAR, MEDIUM EMBEDDED!

This works fine with Firefox/Webkit, and fails quietly on IE8 (don't have any other versions to test). So - if you're in need of embedding a font file directly on your page, and don't have a host for it, this is certainly an option!

And, sorry for the seriously off-topic post. I just figured I would put this here for anyone else searching for a similar solution (and for myself later when I am sure I will forget I even did this).