Embedding Fonts with CSS and Base64

Kerning
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).


9 comments:

  1. about IE8, did you try smaller size?
    sorry, got to ask because I don't have IE8.

    Thanks,

    ReplyDelete
  2. How do you convert the font to base 64?

    ReplyDelete
  3. I just asked a question about how to convert to base 64... found a link which I thought you might want to include in your post:

    http://base64fonts.com/

    ReplyDelete
    Replies
    1. I see you answered yourself before I could... :)

      I think I used the converter here:
      http://www.opinionatedgeek.com/dotnet/tools/base64encode/

      I just uploaded my font file there, and then used the base64 encoded string after conversion.

      Delete
  4. Wow. I just found out about this after reading your post! Especially about converting font type to base64. Thanks for sharing the knowledge!

    ReplyDelete
  5. I was looking for something like this for getting custom fonts on web pages at the Windows Phone 7.5 (embedding fonts was not supported until Windows Phone 8), but it does not seems to work... too bad!

    ReplyDelete
  6. "No longer do I need to worry about hosting a ttf, otf, woff, eot file somewhere" ->
    Actually, you're still hosting and transfering that data to the client-side. You save on the hundred kilobytes from the font but replace it with the "same" (less or practically equal) filesize that you add to your CSS file with those huge strings.
    - neuroxik

    ReplyDelete
    Replies
    1. the main benefit here - is reduced number of http requests required to load the page as each image or font file - requires separate http request to be performed

      Delete
  7. Many thanks for writing this.

    ReplyDelete