Base64 Encoding Web & Icon Fonts in CSS

For quite some time now, web developers have been making use of web fonts quite ubiquitously to add an intricate level of design to websites. Believe it or not, there was a time (late 90s / early 2000s) when there were only a handful of “web safe” fonts that developers could use and know that they’d be rendered consistently in all browsers across all systems. The main problem always has been that if the system did not have the font specified in CSS installed then the browser will usually fallback to some default font like “Times New Roman” (Ewww!) or something else. The only way to get web fonts rendering across all browsers on all systems is to have some way of downloading/importing the font into the web page that the user was viewing.

There were earlier attempts to solve this using things like cufon (*cringe*) but eventually browsers came around and all started supporting the loading of web fonts in CSS. With this approach you could include font files and reference them in your CSS like so…

@font-face {
    font-family: 'Rokkitt';
    src: url('fonts/Rokkitt-webfont.eot');
    src: url('fonts/Rokkitt-webfont.eot?#iefix') format('embedded-opentype'), 
         url('fonts/Rokkitt-webfont.woff') format('woff'), 
         url('fonts/Rokkitt-webfont.ttf') format('truetype'), 
         url('fonts/Rokkitt-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

This approach was taken from the “bulletproof @font-face” syntax detailed by Paul Irish from Google in the article here. At the time it was written it was necessary to use all those different font formats because different browsers supported different font formats in implementing web font functionality. By putting something like the above in CSS a developer would be able to use the “Rokkitt” web font simply by specifying the font-family…

h1, h2, h3, h4, h5, h6 {
    font-family: "Rokkitt"
}

As long as the paths to the font files were set properly in the @font-face block all the headers would be rendered in a slick web font called “Rokkitt.” And the great thing about web fonts is that they are not just limited to typefaces. You could also load up an icon font in the exact same manner to easily implement a vast catalog of icons into your project. Using something like Font Awesome, which was/is used by the very popular Bootstrap front-end framework developers can do something like this…

@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot');
    src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), 
            url('../fonts/fontawesome-webfont.woff2') format('woff2'), 
            url('../fonts/fontawesome-webfont.woff') format('woff'), 
            url('../fonts/fontawesome-webfont.ttf') format('truetype'), 
            url('../fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

And then use icon fonts in a project like this…

.fa-glass:before {content: "\f000";}
.fa-music:before {content: "\f001";}
.fa-search:before {content: "\f002";}
.fa-envelope-o:before {content: "\f003";}
.fa-heart:before {content: "\f004";}
.fa-star:before {content: "\f005";}
.fa-star-o:before {content: "\f006";}
.fa-user:before {content: "\f007";}
.fa-film:before {content: "\f008";}
...

By assigning the content of a particular glyph of the icon font to a class you can add that class to an element like so…

<i class="fa fa-heart"></i>

and an icon will appear inside that element! Pretty slick!

Base64 Encoding Web Fonts
As great as web fonts are, their usage does add something that we have to maintain: the font files themselves. The hitch in all this is that you have to make sure that the paths to the font files are correct and in a place of the same domain so they are not susceptible to being blocked by CORS security in browsers. However, different systems might not allow the placing of files on a server or it just might be a pain to try to manage if you have many different web fonts for different implementations. Whatever the reason, if there were some way to take the actual maintenance of the physical font files out of the equation we would probably be much better off. Fortunately for us, there is a way to do this. What we can do if we don’t want to deal with putting the files on the system? Base64 encoding to the rescue! As it turns out, there is a way that we can load up these fonts without even having to deal with the font files if we encode the fonts as Base64.

@font-face {
    font-family: 'Name';
    src: url(data:font/opentype;charset=utf-8;base64,XXXXXX);
    src: url(data:font/x-font-woff;charset=utf-8;base64,XXXXXX) format('woff'),
           url(data:font/truetype;charset=utf-8;base64,XXXXXX) format('truetype');
    font-weight: normal;
    font-style: normal;
}

Where the XXXXXX slots indicate where you would actually paste very very long Base64 encoded string for that particular file. And if we are not concerned about supporting IE8 or 9, or older versions of Chrome or Firefox, all we need is the WOFF format because this format is supported in all modern major browsers: Microsoft Edge, Internet Explorer 11, and the latest versions of Chrome and Firefox. So really, we just need to the one Base64 string of the .woff file.

@font-face {
    font-family: 'Name';
    src: url(data:font/x-font-woff;charset=utf-8;base64,XXXXXX) format('woff');
    font-weight: normal;
    font-style: normal;
}

All you have to do is to convert a .woff file for a web font (or icon font) to a Base64 string. There are plenty of online tools that will do this for you such as this one here.

If there is one downside here, it is that this technique *will* make your CSS slightly larger but it likely all balances out in the end because you have one fewer HTTP request to make.

, 9bit Studios E-Books

Like this post? How about a share?

Stay Updated with the 9bit Studios Newsletter

0 Responses to Base64 Encoding Web & Icon Fonts in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *