Search code examples
htmlcssfontswebfontswoff

My embedded webfont seems to have a permanent padding-bottom

The pictures below demonstrate my issue. Everywhere this font is used you can see that it won't vertically center like another font would. I don't have any whacky line-height settings. It's just like this anywhere I use it.

I'm at a loss as to why, I've been googling this issue finding nothing but tutorials about line-height that aren't helpful in the least.

The font is ITCAvantGardeStd-Demi.otf.

enter image description here

enter image description here

After following zgood's suggestion, converting the font and checking "Fix Vertical Metrics" on https://transfonter.org/ solved my problem.

With "Fix Vertical Metrics":

enter image description here

enter image description here

Solution

  • Sometimes you need to normalize a fonts vertical metrics. You can run it through a web font generator like Font Squirrel or TransFonter and select "Fix vertical metrics" to generate a new font file.