One of the things I noticed over the years is that web developers hate making sprites. A few years ago there was a heated debate among performance engineers about whether or not it was better to use data URIs in your CSS or to make sprited pngs for all those icons websites typically use (arrows, bullets, etc.). The right answer at the time was probably make a data URI out of your sprite but now we can put that argument to rest forever with fonts. Using a custom font solves so many problems it seems like the obvious solution, and I use them now whenever I can. Now that graphics are heavily influenced by Google’s Material Design, flat one-color icons are very popular, and that’s what fonts are. They are particularly good for mobile, because they look super smooth and sharp on high-density displays.
The pictogram characters in custom icon fonts are called “glyphs”, and all the frameworks seem to have them. Bootstrap has its “gylphicons“, Foundation has its icon fonts and Google Web Toolkit has its material design icons. Many WordPress themes come with several sets of icons included. You could use one of these off-the-shelf icon sets, but they are much bigger than you need. They all contain icons you’ll never use and (what I think is worse) the ones you will use will not be a perfect fit for your interface or be the perfect symbol for your message.
That’s why I like to create a custom icon set whenever I’m doing a new website. These custom sets are very small and efficient. For example, the site I’m currently working on has a set with 117 icons and weighs in at 30k for the minified CSS and the WOFF version of the font (the one most widely supported by browsers). Contrast that with Bootstrap’s glyphicon font that has 250 glyphs in it at about 94k without the CSS.
Creating your custom font
It’s very easy to make a custom font. There are probably several ways to do it, but I like to use Fontello. Fontello already has hundreds of fonts in various collections that you are free to incorporate into your custom font. To do this, simply click on them in the browser window. A circle will appear around the icon and that means it’s been added to your collection. You can also add your own custom glyphs.
For this post I created a custom font with three icons called “pastry”.
I made these in Illustrator by taking black and white clip art and using the command “Object > Image Trace > Make and Expand”. Next I simplified it by selecting the parts I wanted and deleting everything else. (Vector images often include backgrounds and masks.) I sized the artboard to fit my graphic, then saved it as an SVG. It is not necessary to select anything special when doing this. Just use the “Export” or “Save As” command, choose “SVG” as the file type and accept the defaults.
Next I dragged the svg from my workspace folder on my computer onto the Fontello browser window. It automatically added it to my custom font. Once I had all the glyphs I wanted I downloaded my font. Fontello will remember your font on subsequent visits. If you want to reload your custom font in a different browser, or share it with someone, just open Fontello.com and import the config.json file that comes with the font downoad. (Import is under the wrench icon at the top of the page.) If you want to forget your old font and start again you can clear Fontello (under the wrench icon) and delete your custom fonts (link next to the heading above the custom font area) and import a new config. Dragging the svg version of a custom font onto Fontello will also open it as a custom font.
Using your custom font
To apply your font you can use use the classes provided in the CSS on any HTML element (except form fields) or use the character number provided in CSS :before content.
If you want to use your font in a design program just import the font into your system and choose your custom font from the font menu. Typing the characters you want is difficult, since they don’t map well to the alphabet. Instead, copy paste them from Mac’s font book or from your Fontello website page.
Troubleshooting
As always, things are never as simple as they seem. Sometimes when you drag your SVG onto Fontello you get nothing, or a partial image. That’s usually a problem with the vectors in your glyph that can be easily solved.
- Image lost detail or turned solid black
If you have an area filled with white sitting over an area filled with black it will come out all black, since fonts only handle one color. To fix this, punch out the white so it makes a hole in the black that lets the white background show through (Pathfinder > Minus Front). - Image lost parts
Some areas of the image may be separate and this sometimes causes them not to be seen as a group by Fontello. Make your image into compound paths before exporting (Object > Compound Path > Make). - Lines disappeared
Fonts only work with fills, not strokes. If you have strokes (a circle, for example) you must convert these to paths. Use the “Expand” or “Expand Appearance” commands in Illustrator. Then, be sure to merge any that overlay each other (Pathfinder > Unite).
Mac and PC handle fonts differently. I’ve had quite a few cases where the glyph looked fine on my Mac, but on PC it had lost all or some of its shapes. PC is more sensitive to the issues listed above, so be sure to test your font across different platforms and browsers.
When making rectangular glyphs—especially those intended for use at large sizes (logos, e.g.)—center them in a square bounding box using Illustrator’s artboard. Otherwise you may see weird vertical misalignments, which I think may be due to the browse’s inability to calculate the descender height.