How to make SVGs for Fontello

Let’s make icon fonts! Because if you export those as images, they look blurry on the retina screens which is on all new Macbooks and iPhones. First world problems right?

Team Design

Only icons that are one color can be a font. Let’s play with this one.

Most of the icons used in our PSDs are just lines like below once opened in Illustrator. No good!

You guys know how to outline strokes but for reference it’s Object > Path > Outline Stroke.

But grouped outlines won’t work on Fontello! So play with the Pathfinder tool until the entire illustration is connected as an outlined path. This includes any white space that needs to be knocked out into a compound path. Any floating objects also must be in the compound path, not grouped!

Don’t resize the artboard to the boundaries of your artwork! PLEASE DON’T. The artboard needs to be 11 inches x 8.5 inches, and resize your SVG to fill as much of that as possible.

It should look like this once you drag the SVG into Fontello. Nice and big in the circle they set up for you.

Team Development

Do you guys have illustrator?

If you wanna use some NS Icons as well as new icons, drag the .json file into the same place that you’d drag the SVGs then delete the ones you don’t need. Rename the font name to have your own set of fonts for the site you’re working on!