CODEWITHSUNDEEP
htmlcssfontswebfontswoff
atotalpirate
atotalpirate

Reputation: 93

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

Upvotes: 2

Views: 1899

Answers (2)

user3635954
user3635954

Reputation: 1

I had the same problem. It did not have any visual effects, but a notice "Page isn't usable on mobile" on google Mobile-Friendly Test.

My was fine but the text inside had extra height which no css can control.

I just added

h1 {
  overflow:hidden;
}

It solved the problem without any visual changes since the did not have any width or height styles, therefore the overflow:hidden just keeps the without overflowing.

Upvotes: 0

zgood
zgood

Reputation: 12611

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.

Upvotes: 5

Related Questions