@font-face problem, Firefox adds padding, Chrome d

Question

When using a custom font via @font-face, it does render just as I think it should in Chrome. In Firefox, though, additional padding (top and bottom) is added to the font.

Here is my example page that outlines the problem.

Is there anything I can do about it?

Answer 1

FYI, this also happens in Firefox on Linux (and not in Chromium). I tried to load your font in FontForge and immediately got a warning:

The following table(s) in the font have been ignored by FontForge
Ignoring 'LTSH' linear threshold table
Ignoring 'VDMX' vertical device metrics table
Ignoring 'hdmx' horizontal device metrics table

I think the problem is that the VDMX (Vertical Device Metrics) table is defect:

In order to avoid grid fitting the entire font to determine the correct height, the VDMX table has been defined.

This looks exactly like what happens in Firefox: somewhere the minimum and maximum height is incorrectly calculated. This is also clear when you select the text: the selection box extends to the utmost top and bottom of the line; if the h1 element really had padding, you would see a gap between the top and bottom of the line and the selection box.

Also, validation revealed that almost every glyph is “missing points at extrema”:

Both PostScript and TrueType would like you to have points at the maxima and minima (the extrema) of a path.

A quick search showed:

The only other problem I had was a rather nasty condition called "Missing Points at Extrema". With a font, there needs to be a point (or node, as they are called in Inkscape) at the extreme left, right, top and bottom of a glyph. Normally they are there anyway simply because of the way your glyph is built, but diagonal lines with rounded ends often cause problems [source, including picture (scroll down)]

Answer 2

Just Add:

line-height:1;

to your CSS rules