WP Icon font – Ben Dunkle

I made a font out of the icons I’m proposing for future versions of WordPress. Here’s how I did it:

Designed them in AI CS6. Preferences set like this:

File handling preferences in AI — Note the copy as settings; apparently you need this so you can copy/paste into fontlab…

AI preferences — Gridline every 10px, w/10 subdivisions. Icons are based on a 10×10 grid. I made the color black so they’re easy to see.

snap settings — Make sure snap to grid and snap to point are turned on, and that you can see the grid.

Close up of a couple icons — Note the extra strokeless/fill-less 20x20px box around the icons. You need this to copy/paste into fontlab and not have them get scaled up.

Then I created a new font in Fontlab 5, with metrics set like this:

I copy/pasted each icon-the shape and the invisible bounding box- into a separate glyph in fontlab. I tried to make it intuitive; “a” is appearance, “d” for dashboard. “p” was problematic; posts, pages both have p.

After I generated the otf file, I used @font-face to embed it on a test page. I set a base size to 62.5% and set the icons to 2.0em; effectively rendering them at their native 20×20 pixels. The key thing is the -webkit-font-smoothing:antialiased property in the css. Without it, they look like garbage. They pretty much look like garbage anyway in firefox/opera, and I have no clue how to get them in IE. But in webkit it’s gold.

I’m trying to get the whole thing on github since I guess that’s what you’re supposed to do, so stay tuned…