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?
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)]
Just Add:
line-height:1;
to your CSS rules
