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 issue I'm having is that firefox renders the font higher than chrome - at the size I am displaying the font this is very noticeable (3 or 4 px - which on a button means they're totally misaligned).

I have also referenced Github's octicon documentation - when checking out how octicons compare browser they look great! No noticeable difference as far as I can see. How did they achieve this?

I am using inkscape and have tried a couple of different svg starter templates. Setup is Set width: 1024 and have tried the icons at various sizes with no different outcome. i.e. 512pt square and aligned just under the baseline.

My question is what rules do I need to impliment when creating a webfont to get the smallest difference between browser rendering of the font?

score 14 · Answer 1 · answered Jul 28 '12 at 01:30

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:

Thanks for the response : ) No doubt you are right and vertical metrics is the reason for the in-discrepancies. Are there any steps I can take whilst creating the original SVG in inkscape to set / optimise the vertical metrics? I can't see any settings / values of ascender / descender / line gap / baseline etc. I have already run the font through your fix vertical metrics tool and the alignment is way off between browsers (webkit & gecko), even on the same OS (linux). I can only assume my canvas is set-up incorrectly in inkscape (even though I have tried a variety of starter webfont SVG's)? — , Jul 28 '12 at 19:40
We don't have any experience creating fonts with Inkscape, but I'd love to see a TTF you've created to check the internals. Feel free to email it to us: hello at fontsquirrel.com — Font Squirrel, Jul 30 '12 at 14:57

score 3 · Answer 2 · answered Nov 20 '12 at 05:00

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.

answered Nov 20 '12 at 05:00

fabien

2,228
2
19
44

1

I have not come across any issue using icomoon so far. But I didn't test it on a Windows machine. Works fine on Safari, Firefox, Chrome on Mac OSX. Works fine too on all iOS devices tested so far as well as Chrome and Firefox on Android. – MrUpsidown Nov 21 '12 at 19:02
icomoon.io Link is dead by mai 2015 – Milche Patern May 21 '15 at 20:26

score 0 · Answer 3 · edited May 23 '17 at 12:16

0

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

edited May 23 '17 at 12:16

Community

1
1

answered Dec 16 '13 at 11:30

Karlis Rode

3,643
2
16
16

score 0 · Answer 4 · edited May 23 '17 at 12:00

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

Icomoon

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

Creating a cross browser icon webfont

4 Answers4

Linked