Search code examples
textfontsfont-facecss

@font-face embedded font height troubles


Having some trouble with the CSS alignment of text generated with @font-face. For some reason, there is a ton of extra space visible at the bottom of each letter, stretching the text's containing box too far downward.

If you inspect the text on this sample page, you can see what I mean.

Have googled and inspected a bunch of other pages, but this one's got me stumped. Any chance someone could help?

Thanks!


Solution

  • For starters, the computed line-height is 65px, so you could always define it to be 60px if you wanted.

    However, most of that space is actually just required by the font you chose. Though you've converted it to uppercase with your CSS, the font still needs room to render characters that draw below the text's baseline. Try adding a comma to that header's text, and you'll see it's actually pretty huge and should fill up most of the empty space.