Creating an icon webfont

Practically all recent web browsers have the possibility to display webfonts. So it is a good idea to save some bandwidth and put your icons into a font instead of converting them to JPEGs, PNGs, GIFs, or SVGs. What’s more, you get to avoid rasterization, and thus, keep resolution independence for your icons.

Creating a new icon font

So, start Glyphs, choose File > New, and save your working file to a location convenient to you with File > Save. Then, give your font a name by going to File > Font Info > Font. Fill in the Family Name, and if you want, the designer (the person who drew the icons) and his or her URL, the manufacturer (the person or company who produces the font) and his or her URL. Eventually, you can click on the Refresh button with the circled arrow to have Glyphs generate the Copyright notice for you.

Or, if you do it in Glyphs Mini, the Font Info is a tab of the main window:

The other stuff is not important to us. When you are done, close the Font Info window (or tab) to return to the Font window, and perhaps save your font again.

Creating PUA glyphs for your icons

The slots inside a font are called glyphs (hence the name of our favorite font editor), and those glyphs usually correspond to characters. In short, characters are what you type, glyphs are what you see. The character-glyph relationship is established through the Unicode value assigned to a glyph. Sometimes, glyphs do not have Unicode values, but in our icon font, each glyph will have one. If you want to know more about Unicode, glyphs, and characters, read the Unicode tutorial.

Into a Unicode-assigned glyph, you should only put pictures that match the meaning of the Unicode value. So, for instance, into U+0041 LATIN CAPITAL LETTER A, you should only ever put something that at least vaguely resembles an A. Why not an icon? Because it can confuse search engines, the search function of your website, or the person trying to make sense of what is displayed on the screen if, for some reason, our icon webfont cannot be loaded and is substituted with a fallback font.

So, the first thing we do in the Font window, is select all glyphs and click on the Minus button at the bottom of the window. When Glyphs asks you whether you know what you are doing, say Remove:

Fine, so we have no more letters in our font, but where do we put our icons now? Easy: In new glyphs associated with Unicode values in the Private Use Area (PUA).

Private what? Let me explain. In the long, long range of Unicode values, there are a few reserved for whatever you intend to use them for, or, in other words, for private use, as the nice folks from the Unicode Consortium call it.

The Unicode standard knows a few PUAs, but the one most convenient to us is the PUA inside the Basic Multilingual Plane (BMP, i.e., all Unicodes from U+0000 to U+FFFF). The PUA in the BMP ranges from U+E000 to U+F8FF.

So, how do we create a glyph there? Click on the Plus button, next to the Minus button you just pressed. A new glyph called newGlyph will appear. It will look something like this:

Now, you must know that Glyphs auto-sets the Unicode value of a glyph based on the name you assign to the glyph in question. So, should you call your glyph B, Glyphs will set its Unicode to U+0042, which is the Unicode for LATIN CAPITAL LETTER B. To put your glyph into the PUA of the BMP, you have to call it uni plus a four-digit hexadecimal code between E000 and F8FF. In other words, anything between uniE000 and uniF8FF is fine:

You will see that the category changes to Private Use. Also, both the placeholder image and the Unicode value of the glyph changed to reflect that this glyph now officially resides inside the Private Use Area. Cool.

Or wait, not so cool, actually. This is not a biggie if you only have two or three icons, but if you have, like twenty, a hundred, or even more icons, these names are not much of a help. Here’s a little trick. Once you have assigned a glyph to a Unicode value by changing its name to uniE000 or the like, you can change its name again, this time to something descriptive like twitterIcon or shoppingCartIcon, and the glyph will keep its Unicode value:

Keep an eye on that Unicode value after changing the glyph name. If it changes again to something outside the PUA, chances are you picked a name that is reserved for another glyph. Glyphs has a built-in list of glyph names it recognizes, and you can see it in Window > Glyph Info if you like. Or simply add Icon to the end of the glyph name and you will avoid all trouble.

One word about glyph names. Only use upper- and lowercase ASCII letters, i.e., A-Z and a-z, perhaps figures (0-9) at the end of the name. Spaces are not allowed, and the name must not start with a figure. So, homeIcon and loginIcon are okay, but names like home button and MäxIcon are not okay. If you want to know more about glyph names, read through the Getting your glyph names right

Preparing your icons in other apps

Glyphs provides great drawing tools, but chances are you already have vector icons. From most vector apps, you can simply copy and paste into Glyphs. And since scaling in Glyphs can lead to rounding errors, it is best to scale your artwork to the right size before you bring it into the font.

Keep in mind that one point in Illustrator etc., will be one unit in Glyphs. And, usually, you will want your icons to be approximately the size of a capital letter. The average cap height is 70 percent of the UPM (units per em) size. And since by default, the UPM is set to 1000 units, the average cap height will be 700 units.

So, before you copy and paste your icons into Glyphs, scale them up to approximately 700 points in the originating application.

This is all you need to know for this tutorial. If you are curious and want to know more about moving vectors between Adobe Illustrator and Glyphs, you can read about it in the Importing from Illustrator tutorial.

Also, you can minimize rounding errors by setting File > Font Info > Other Settings > Grid Step to zero, or setting the Subdivision to ten or a hundred. All coordinates will be rounded according to these two settings.

Why is there rounding at all, you ask? Well, some font formats only support coordinates rounded to full units, and full units actually make editing easier.

Putting icons into your font

Alright, now we are ready for our first icon. Double click your glyph with the PUA code, and Glyphs will open a new Edit tab and insert that glyph for you. Your glyph will look something like this:

You see a set of lines, a grey placeholder image behind them, and a grey glyph info box below. Press Cmd-zero to scale the glyph to the size of the window.

The lines are called glyph metrics. The second line from below is the baseline. You want to put your icon on it. The second line from above is the cap height, by default at 700 units. You want your icon to reach that height. The other horizontal lines are the ascender (by default at 800), the x-height (500), and the descender (-200). You can change these values in File > Font Info > Masters (or simply File > Font Info in Glyphs Mini), but keep the values in the same ballpark. Changing them too much can cause headache later. You want further reading on this? You got it: the Vertical Metrics tutorial.

The two vertical lines denote the left and right sidebearings, often abbreviated as LSB and RSB. The distance between them is called the advance width or simply the width of the glyph. You can change those via the grey info box at the bottom.

The placeholder image will disappear as soon as there is any drawing in the glyph. So, let’s simply draw or paste our icon into it:

To optimize your paths for font rendering, select all paths (or deselect everything), and call these commands: Paths > Correct Path Direction (Cmd-Shift-R), then Paths > Add Extremes, and finally, Paths > Tidy Up Paths (Cmd-Opt-Shift-T). In Glyphs Mini, these commands reside in the Glyph menu. If you want to know more about what makes a good path good, please read the Drawing good paths tutorial.

Do not forget to adjust left and right sidebearings by putting numbers into the L and R fields of the grey glyph info box. If you do not know what a good value is, start with 50 for both LSB and RSB:

You can always change the sidebearings later, and even batch-set them for all selected glyphs in the Font tab. If you want to learn more about spacing (which is what type designers call the process of adjusting the sidebearings), read the Spacing tutorial.

Congratulations, you have your first icon in your icon font! This is a good time to save your font again (Cmd-S), and switch to the Text tool (T) to admire your creation in its full anti-aliased beauty:

You can edit your glyph again if you move your cursor before (i.e., to the left of) the glyph and choose the Edit tool (the pen symbol in the toolbar) or simply press the Esc key.

Pixel perfection

Pixel perfection is totally overrated. But if you really, really must, then please read the Pixel perfection tutorial.

Batch-creating glyphs

You can create more than one glyph via Glyph > Add Glyphs… (Cmd-Shift-G, not available in Glyphs Mini) and entering their names, separated by spaces or newlines, e.g.:

uniE000
uniE001
uniE002
uniE003
uniE004
uniE005
uniE006
uniE007
uniE008
uniE009
uniE00A

… and so on. Once you press the Generate button, the glyphs will be added to the font. If you have an Edit tab open, they will also be inserted in your sample string.

Testing your font

In theory, all you need to do, is export your font via File > Export (more on this further below), and you are ready to go. But…

There is one problem with test-driving an unfinished font, and it is called font caches. Seriously, read through these two tutorials before you decide to test your font: firstly, Eliminating font cache problems, and, if you happen to have Adobe apps on your Mac, Testing your fonts in Adobe apps.

Almost every other support issue we encounter is a font cache issue. So, trust me, your life will be much, much easier if you carefully read through those two articles. Grief and frustration await you if you don’t. Your choice, really, but don’t tell me I didn’t warn you.

Exporting a webfont

Glyphs only exports OpenType fonts. So, once you have your icons together, choose File > Export (Cmd-E) and select OTF in the dialog that follows. You can now choose your Outline Flavour: CFF or TrueType. Try both and test the result, see what looks better for you, but honestly, it does not really matter anymore. TrueType means the outlines get converted, which may result the shapes being a tiny bit less accurate. Then choose your File Format: for the web, pick WOFF and WOFF2. Remove Overlap is a good idea, just in case. But Autohint must be off for an icon font. (Read here why.). You can also choose the Export Destination for your font right away, handy if you reexport multiple times.

I recommend you convert it to both an EOT for Internet Explorer, especially prior to version 9, and a WOFF 2 for all other browsers.

Putting the icons on your webpage

So, now that we have our webfonts, how do we put those icons on the webpage? I assume you know how to create a font-face for your EOT and your WOFF. If you don’t, well, read through this and this and this or whatever else you can find on Google about it.

Once you have the font-face declared, introduce a pseudo-selector like this in your CSS:

[data-icon]:before {
   font-family: "My Icon Font";
   content: attr(data-icon);
   speak: none;
}

The HTML5 data attribute keeps your CSS generic, so you do not need to declare extra classes for every icon, but can reuse data-icon. Insert an icon in your HTML code through an empty span with an aria-hidden attribute:

<span aria-hidden="true" data-icon= "">

You see the Unicode value E000 in the data-icon attribute? This way, your content stays semantically sound, and thus, screenreader-friendly. Or, more generally put, device-independent.

Nifty. Have fun with your webfonts! And enjoy the speed gain over pixel image (and SVG) solutions.

Thanks to Markus Greve for his great talk at tgm Webfontday 2012.

Useful scripts

In the mekkablue scripts (available in Window > Plugin Manager > Scripts), there is a script called Test > Webfont Test HTML. Run it after your export, and it will create an HTML for your font in the export location of your WOFFs. And, super handy, will open it for you straight away in your favourite browser.

Update 05-02-2016: updated for Glyphs 2
Update 2022-08-01: updated title, screenshots, related articles, minor formatting.
Update 2022-08-03: added Useful scripts and rewrote paragraph about exporting.