Tag: fonts

WP Icon font

Posted on

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:

fontlab metrics Screen Shot 2013-02-06 at 9.02.30 AM

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…