I had to create an icon font the other day to demonstrate the different ways of using icons (including icon fonts). I figured I would document how to make one using FontForge, in case you ever have to make or adjust one by hand.
A couple notes before we get started. Icon fonts are just one way of using icons. The other current major players are vector and raster image icons. CSS-Tricks has a comparison of fonts and SVG icons. In general, the trend I see today is using SVG icons where possible with PNG fallback. Icon fonts’ main advantage is compatibility. They are usable even in truly archaic versions of IE. However, SVG has now gained pretty solid browser support as well. You may still find icon fonts fit your situation best, but it’s worth considering other options too. Finally, if you are routinely packaging a large number of icons into a font, it will probably be easier to use a tool, either a GUI based tool like Icomoon or Fontello or a build script like Font Custom.
What we’re going to be doing today is replacing some characters in a font with bunny icons. We’ll be replacing the capital letters ‘C’ and ‘H’ to represent a bunny with a carrot, and a happy bunny, respectively. Later articles will explain how to do some fancier character to icon mappings.
First up, you’ll need to install FontForge. Visit their site and follow the installation instructions. It can be a little daunting, but they try to make it as simple as possible.
Next, you’ll need to grab the resources for this lab. You can clone the repository, or just download the zip (click the Download Zip button in the lower right). All the materials for this lab, including these instructions, are in the 01-ascii folder.
Next up, open up FontForge. After it’s open, you will need to open the bunny-sans.svg font via File > Open. The file picker is a bit different than your standard OS dialog, and will probably start you out at the root of your OS disk. You can click the Home button in the upper left to take you to your home folder.
Bunny Sans is a trimmed down set of glyphs from Open Sans. We’re starting with an existing font so you don’t have to set everything up from scratch, but you can also create a font entirely from scratch with FontForge.
When you have opened up bunny-sans.svg, you should see something like the above image.
FontForge’s main view of a font is as a table of glyphs. Each glyph maps a character code to a path representing its visual outline. Think of a character code as what you would type on your keyboard, and the path outlines as what your display would show you, using a font to map one to the other. The character code is in the blue outlined box, while the outlines are displayed below.
We’re going to edit the C (that’s a capital) first. To do this, you will need to open the glyph info for the letter.
C in the font info tableElement > Glyph Info or double click the glyphWhen you do this, you will get a view of the glyph outline that you can edit. It should look like the image below.
The outline is just a path, in a vector coordinate space set by the font. Each glyph sits within the same vertical coordinate space, but glyphs can have varying widths. I have highlighted the area allocated to the glyph in the image below (the horizontal line about 75% down the blue box is the baseline). The coordinate system’s origin is on the left at the baseline, with x and y coordinates increasing towards the upper right.
While FontForge has drawing tools to allow you to manipulate paths by hand, we’re just going to import some existing artwork to replace the C outline. First, remove the existing artwork.
Edit > Select > Select All or Cmd/Ctrl + ADelete or Backspace keyThen, import the artwork for the carrot bunny.
File > ImportFormat: SVG is selected at the bottom of the dialogcarrot.svg from the 01-ascii folder
You should see a new outline for the glyph like the one below.
This outline needs to be resized a little bit to fit well within the glyph’s box. I’d like it to be a little smaller and shifted left and up a little bit. With all of the points selected, do the following.
Element > Transformations > Transform (Cmd/Ctrl + \)Move (-200, 100)Scale Uniformly (90%)Apply to test out the transformOK
You may be missing out on some of the transformation tools in a program like Illustrator, but this was the fastest way I found to make these adjustments.
Next up, let’s see what our glyph looks like when used alongside other glyphs.
Metrics > New Metrics WindowAB)
The window will display the enlarged glyphs below, how they will lay out next to each other. The space between the glyph and its neighbors on the left and right (Left Bearing and Right Bearing) seem a little uneven. You can adjust them here in the L Bearing and R Bearing cells beneath the C in the bottom table.
L Bearing for C (290.21) with 100R Bearing for C (-166.83) with 100Don’t worry if FontForge tweaks your numbers slightly. FontForge is doing its best to match all your constraints, but can’t always do so exactly.
Congrats, you’ve finished editing your first glyph. You can close the metrics and glyph windows.
Feeling confident? Go ahead and repeat the process for H and happy.svg.
Go to File > Generate Fonts. Choose Web Open Font, and save it as BunnySans.woff. I would uncheck Validate Before Saving, but if you leave it checked, just choose to generate the font despite the validation warnings.
If you’re interested in the warnings, see the Additional Info section at the bottom.
And that’s it, you’ve got a woff font! If woff support is good enough, you’re done, and can add it to your project. Check out the result for an example how. If you need more browser support, you can upload the font to a service like the Font Squirrel Webfont Generator.
Substituting icon outlines for standard characters like C and H is just one way of placing icons in a font. I’m going to cover two more, Private Use Area glyphs and Ligatures, in subsequent articles (for an overview of these different methods, check out this blog post). For best practices when using icon fonts, I would also make sure to check out Filament Group’s Bulletproof Icon Fonts article.
File an issue or fire off a tweet.
The artwork is by Brad Ashburn, and the font you’re editing is Open Sans.
Element > Simplify > Simplify.Element > Add Extrema.Element > Round > To Int, but it will often result in skewed artwork, and bring back your missing points and self-intersecting path validation problems.