Creating Custom Icon Webfonts

Webfont icons — what typographers would traditionally refer to as dingbats — are an important part of modern web development. There are so many advantages to them:

1. Compact smaller in file size using newer formats like WOFF and WOFF2 compared to SVG or conventional images.
2. Support for those two more efficient format is now widespread enough we can ditch older formats like OTF, EOT, or SVG.
3. Fonts are scalable without pixelation doing nothing more than changing your font-size.
4. Multiple icons can be stored as different characters, saving handshakes.
5. As an external file, they are more likely to be cached across different pages on the same site. If you use a collection like font-awesome you can pull from a CDN increasing the odds people will already have the file cached.
6. They can be applied in a manner where non-screen UI can get meaningful text instead of the icon, and for screen we can leverage the fallback text as styled tooltips.

In case you couldn’t tell, I’m a fan. :D

The only major drawback is the learning curve for building fonts is… well, it’s not entirely steep, but there’s a lot of measurements — ascender, descender, subline, drop-line, etm. — that if you’re making icons just don’t matter!

I’ve had a lot of people ask “how do you do this?” — so here we go.

The Software