The Easiest Way To Convert SVGs & Icons to Web Fonts

Web Design & Dev

I've been doing this for the past few months now on all my latest designs. I just recently used it on one of my personal projects Best5ive, I originally started using a sprite image but because the icons were so many the sprite image was huge even when optimized so I made the switch to web fonts and never went back.
The benefits of using web fonts instead of images or sprites is that web fonts load much faster, they're smaller and look good on all screen sizes and retina displays by default without you needing to do additional work like you would with images. Some say SVGs are more pixel perfect, I don't see the difference really in most cases and SVG are usually bigger than web fonts in terms of file size.
In the end it comes down to a matter of preference, and fortunately this guide applies to either method.
I promise you though, one you start doing this you'll never go back to images for icons.
Lets Get Started….

Sign Up For The Noun Project

First thing you need to do is create a free account on TheNounProject, for those who aren't aware the The Noun Project is a site that hosts thousands of glyph icons from different artists. Most icons are free and some for a fee, the fee is rarely ever money, usually it's attribution, meaning if you use a icon, do remember to credit the artist that created it with a link, mention in your code etc.
Once you've downloaded the icons, it's time for the next step.

Sign Up For Fontastic.me

Over the past year, a bunch of services have popped around the web for generating icon web fonts. Fontastic however has been the most impressive I've seen. The icons you downloaded from The Noun Project already come formatted to work on Fontastic, just upload them.

As you can see, you can either download the web font or embed it the way you would a Google font.
Font Awesome, Octicons, Cittadino, Streamline, Foundation Icons and plenty other icon fonts are available out the box on Fontastic.me, so you can pick and choose which icons you want from which libraries and build your own custom stack.
Like I mention in the beginning, Fontastic not only provides you with the web font but also a SVG sprite version as well. So it really does come down to preference.
Once you've built your icons you can display them various ways, the simplest would be below.