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)]