Creating a cross browser icon webfont

Question

I have been making my own webfont taking as a starting point articles from web designer depot and intridea.

I know different engines render fonts differently and but the

Answer 1

I used the Icomoon App to create the Emoji icon font as well as for creating custom icon fonts on a per project basis.

The Icomoon App allows you to do each of the following :

• Get one or more icons from several popular icon fonts
• Upload other fonts, which may be icon fonts but also regular fonts
• Upload SVG files to use as icons
• Combine any number of icons from any number of available fonts
• Set the UNICODE hex value for whichever characters you need
• Export and/or save the font set you create

For more details, see Create webfont with Unicode Supplementary Multilingual Plane symbols.

Answer 2

This is a complicated question that involves something called vertical metrics. A font has three sets of these. the first set, found in the 'hhea' table, are generally specific to Mac. The other two sets, found in the 'OS/2' table relate to Windows (and Linux). The idea is to get these values equalized. Our Generator has a feature called oddly enough 'Fix Vertical Metrics' which does a best guess at these. Note that Github used the Generator for finishing their icons.

I know this doesn't relate specifically to SVG fonts, but I'm pretty sure this is where your problems lie. Having different vertical metrics values screws up the baselines across platforms.

Some reading:

• http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/
• http://webfonts.info//webfonts-know-how/part-1-we-need-talk-about-line-height
• http://code.google.com/p/googlefontdirectory/wiki/VerticalMetricsRecommendations

Answer 3

There's a webapp, icomoon : http://icomoon.io/app/

It make the job pretty well but you have to test the rendering of the different icons.

They offert a lot of icons if you don't want do design everything.

Answer 4

I had the same problem, and solved it by manually setting the metrics for all three types.

You can see my working solution with screenshots of the settings here: https://stackoverflow.com/a/20609766/955413