3 easy steps to icon font nirvana

So you're sitting there, looking at an amazing set of font icons. As we know, icon fonts are awesome. Every vector icon you ever wanted, here in this lovely treasure trove of an embeddable web font. All in one spot. Yay!

Well, a couple of spots, really. There may be a handful you wanted from another set, but loading two (or, perish the thought, three!) separate fonts for a few extra icons is just plain old inefficient, right? Why bother. You'll find something passable in the set you're already standardized on. You'll make do.

Of course, then there's the issue of hosting your icon font. There are always free or subscription-based CDN-hosted solutions out there to consider (although a popular option with designers, Adobe TypeKit, currently doesn't offer icon or symbol fonts). However, if you want to keep up-to-date and yet retain some form of control, you're probably considering self-hosting.

Popular font sets like Font Awesome, Zurb's Foundation Icons, GlyphIcons, and IcoMoon and are all fabulous, but you're typically going to want to host them yourself, unless you find a good CDN you're already using for other things. Self-hosting fonts also means dealing with additional file size. The latest version of Foundation Icons 3, for instance, is a not-imperceptible 56kb (TTF), 32kb (WOFF), and 148kb (SVG).

Sure, with gzip and caching it probably won't be overly noticeable to your users, but every little bit adds up.

These days, we're all looking to shave a handful of kilobytes (and a few HTTP requests) off our JavaScript and CSS, leveraging obfuscation and minification, concatenation and compression. When we're all excited to use Compass to auto-generate sprites, and Smush.it or OptiPNG to compress our images by a few percent to save another few bytes, a 50kb+ font (or significantly more) sure is a lot of unoptimized page weight.

Why not try and clean that up a little, too?

The incredible shrinking font

Icon fonts are a particularly good application for the holy grail of self-hosted web fonts, subsetting.

What is font subsetting? Simply put, it's the ability to extract and use certain subsets of characters (i.e. Latin, Cyrillic, punctuation, currency symbols) from a font. Better yet, extracting selected individual characters. This in turn reduces the font's file size significantly, making it quicker to load and less of a bandwidth and resource hog in your pages.

The primary downside of a subset, particularly a handmade one, is that it's a custom font. That means it's very unlikely to already be existing on your users' systems, or cached from previous visits to other sites using the same set. However, in cases like icon fonts, the advantages of subsetting heavily outweigh the disadvantages.

Google Fonts, a free service, allows some basic, high-level subsetting in their font configuration options, which makes sense for general text, but isn't ideal if you're using something like a symbol or icon font.

Step 1: A potential solution

What if there were a way to get the best of both worlds?

Enter Fontastic, an excellent resource for mixing and matching icon fonts into your own customized set — or subset. With support for many of the larger icon font sets (including the aforementioned Zurb Foundation Icons and Font Awesome, among others), and over 6,000 icons to choose from, it's an outstanding way to put together a custom web font with only the handful of icons you actually need.

On top of that, you can also combine icons from multiple publicly available (or uploaded) sets to form your own tight, custom set.

What's more, you can upload your own icon fonts and pick from those in addition to the ones they already make available. You can then choose to download your generated font and self-host it, or use their CDN-hosted options instead. To top that off, Fontastic is free. Yes, as you can see, I'm a convert.

Fontastic is, well, a fantastic service. So now you've got your customized, tiny font that only includes the few icons you actually need, without all the rest of the cruft. In our case, on this site, subsetting our Foundation 3 icon set to precisely what we were using (a grand total of 11 glyphs) dropped our TTF from 56kb to a minuscule 3.48kb. Awesome.

Here's a look at the custom icon font subset we use for this site, via Fontastic:

So, we're all done. You can just hop over to the Download tab, drop Fontastic's automatically generated CSS that straight into your code and you're done, right?

Not so fast. You still have some work to do.

Step 2: Compress that font

Depending on how much development work you do on the front-end, you may or not be familiar with the concept of data URIs. In short, a data URI allows you to encode a resource (be it an image, a font, or something else) as a string and embed it directly in your CSS.

This technique, which typically depends heavily on on base64 encoding, is not without its warts. It may reduce the number of HTTP requests to external resources in your CSS, but it also increases the size of your stylesheets. Base64 encoded files (particularly images) are on average 25-40% larger than the original. If you're taking advantage of gzip compression, and your stylesheets are consistently cached, it definitely makes sense to encode certain things as data URIs, although you need to be careful about it.

There's also research out there that suggests that data URIs can be significantly slower on mobile devices. So, buyer beware.

What this leads us to is the notion of base64 encoding web fonts in our CSS. Now the caveat — you definitely do not want to do this for all of your fonts. In fact, for larger fonts, it may be a real no-no. But for icon fonts, particularly if you're dealing with a tiny, compact subset, encoding makes a lot of sense.

This brings us to another excellent web service, FontSquirrel's WebFont Generator tool.

The FontSquirrel WebFont Generator is typically is for converting from one font format to something more web-friendly. For example, taking a regular TTF or OTF font (that you have a license to use, or is free-to-use) and converting that to WOFF, EOT, and SVG formats for use in various browsers.

We're going to use it for something slightly different. One of the somewhat hidden features FontSquirrel's generator offers, under the "Expert..." option, is the ability to base64 encode your fonts automatically. Scroll down to the CSS section under Expert (see screenshot below), and you'll see the checkbox for base64 encoding there, further down the page.

Check it, and go ahead and output your file. Now you're all set.

Now, you could always do this manually somewhere else (there are a number of free online tools for handling encoding), but using FontSquirrel is quick and easy, and if you're not familiar with base64 encoding in general, probably simpler. SASS users may want to consider using Compass's inline-font-files helper instead, but the result is the same. A lovely, inline-encoded icon font.

Either way, two free services offer you the ability to both subset and inline your icon font in two quick steps. What's left? Updating your CSS with your newly encoded icon font.

Step 3: Build your icon font stylesheet

This step is the simplest, and requires nothing other than a text editor. If you've been following along this far, you're probably done already, but let's show an example anyhow.

Here's what the final icon font we're using for this site (a subset of Foundation Icons 3) looks like:

All that's really needed is to take the CSS output provided by FontSquirrel's generator, dump it into your CSS (or whatever flavour of extension language you prefer - SASS, LESS, or Stylus), and make sure the physical font files are on your filesystem, and that the paths are correct. The base64-encoded font will be used if possible, with the other formats available as fallbacks for older browsers.

That's all it takes! Bulletproof, compressed, subsetted icon fonts. All in three easy steps. Enjoy!

Original photo courtesy of JWPhotography2012 on Flickr.