Why are my descenders being cut off when using CSS @font-face?

Although your question is in relation to the Google Web Fonts API, the principle of my answer beneath is the same.

If the descendants are being cut-off when serving a TrueType Font, the most likely cause is that OS/2 metrics are incorrectly set (negatively) on the font.

The values that may need adjustment are WinAscent & WinDescent.

A quick and dirty fix would be to adjust these both to 0.

This can be done using Font Forge. Once the font is opened in FontForge, you can gain access to these parameters via the 'Font Info' dialogue.


With some help from @adamliptrot, I discovered that Droid Sans' descenders are absolutely fine at a few precise pixel sizes: 18, 22 and 27px. I adjusted my em's accordingly:

h1 { font-size: 1.6875em; }
h2 { font-size: 1.375em; }
h3 { font-size: 1.125em; }

Not ideal, but it works:

The descenders work!
(source: thinkdrastic.net)

Tags:

Css

Font Face