It appears that Firefox is interpreting the height of this font as 0 in every instance, causing its baseline to consistently align with the center of the line-height. This issue seems to be specific to this particular font, and rebuilding the WOFF, TTF, and SVG formats from the original OTF source does not resolve it. Can anyone provide insight into a more targeted cause or solution?
LEFT: Mac 10.8.3, Chrome 27.0.1453.110; RIGHT: Mac 10.8.3, Firefox 21.0
CSS
@font-face {
font-family: 'HTF46';
src: url(KnockoutHTF46Flyweight.eot),
url(KnockoutHTF46Flyweight.otf),
url(KnockoutHTF46Flyweight.woff),
url(KnockoutHTF46Flyweight.ttf),
url(KnockoutHTF46Flyweight.svg);
font-weight: normal;
font-style: normal;
}
div {
font-size: 30px;
height: 24px;
border: 1px solid #09F;
outline: 1px dashed #F00;
line-height: 24px;
font-family: "HTF46";
text-transform: uppercase;
}
HTML
The box border appears in blue.
<div>This is some text</div>
The dashed red outline accentuates the font displacement.
I experimented by retaining only one URL in the font-face { src: } declaration for each font format. In my testing, Firefox rendered the OTF, WOFF, TTF, and SVG files identically.
(Please note: The original version of this test included format('truetype') and similar parameters for each font file, but I omitted them due to format('svg') causing issues with font display.)