Take the 2-minute tour ×

I'm using the Google webfonts API to embed Droid Sans on a page. All is fine, except for the descenders (i.e. the dangly bits on y, g, etc). The latest versions of Firefox, IE and Chrome on my Windows Vista box are all cutting the bottom off.

<!DOCTYPE html>
 <title>Droid sans descender test</title>
 <meta charset="utf-8">
 <link href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold" rel="stylesheet" type="text/css">
 <style type="text/css">
  body { font-size: 16px; font-family: "Droid Sans", sans-serif; }
  h1, h2, h3 { margin: 1em 0; font-weight: normal; }
  h1 { font-size: 2em; }
  h2 { font-size: 1.5em; }
  h3 { font-size: 1em; }
 <h1>A bug ran under the carpet anyway</h1>
 <h2>A bug ran under the carpet anyway</h2>
 <h3>A bug ran under the carpet anyway</h3>

The above code looks like this:

Descenders getting cut off

I've tried line-height, font-size, padding etc to no avail. I had some success with font-size-adjust, but the last time I checked it was Gecko only. Does anybody know of a fix for this?

share|improve this question
Works fine on MacOS WebKit. Have you tried giving a bigger margin? –  Jakub Hampl Jun 3 '10 at 14:50
Yep. I suspect this is going to be one of those "that's just how Windows does stuff" questions. –  Olly Hodgson Jun 3 '10 at 14:54
This might just be a copy-paste error, but font-family: "Droid Sans"sans-serif; needs a comma. –  kevingessner Jun 3 '10 at 16:38
@kevingessner Good catch. I ripped out all the fallback fonts for simplicity's sake, but removed a little too much :) –  Olly Hodgson Jun 3 '10 at 16:41
add comment

6 Answers

up vote 9 down vote accepted

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!

share|improve this answer
This probably means things will fail again at any kind of zoom, or on a non-standard resolution display. –  Mark Ransom Jun 21 '10 at 18:15
It seems to work fine at various zoom levels. Given that it's only a minor visual glitch that only happens on Windows, and in this case it's an intranet with a fairly homogenous hardware setup I'm not too worried. Certainly something to keep an eye on though :) –  Olly Hodgson Jun 22 '10 at 10:07
Had the same issue with a font 'Walkway' and the magic 1.6875em figure worked for that too...odd systematic fault –  Andiih Nov 16 '11 at 17:55
add comment

I have checked the referenced ttf files, and even in windows font viewer the descenders are being cut. Seems more of an issue with the font being served rather than with your styles.

share|improve this answer
So they do. I wonder if this is an issue with the fonts or with Windows font rendering? –  Olly Hodgson Jun 3 '10 at 15:08
add comment

If you're using Font Squirrel, it seems the issue with the sans variant has been sorted, but the issue remains with Font Squirrel's serif variant.

For a fix for the serif variant, go to the Web Font Generator and load the font files you need (do not rely on the package they provide).

Click the 'Expert' radio button, leave all of the settings but under 'Advanced Options' change the 'Em Square Value' to '2162' and generate the font.

This renders the font properly at all sizes

share|improve this answer
add comment

we've been having the same problem...we tried using font squirrel. we tried using google web fonts. The font kept cutting off "hanging" letters like g. Also, the google hosted version did not appear as true and clear as the other ones. The font seemed a bit choppy.

Our solution:

We hosted the font ourselves without formatting it for the web. Then we converted the ttf file to an svg, .eot, and .otf, and uploaded those as our fixes for ie and mozilla etc.

share|improve this answer
add comment

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.

share|improve this answer
This did not seem to work for me. I successfully changed these metrics in fontforge, but the problem persists. –  wprater May 29 '12 at 15:40
Can you send me the font, I'll have a look at why this isn't working. –  uniquelau May 31 '12 at 13:25
add comment

If the tip at the top - changing font-size to....

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

doesn't work for you, then add "line-height" to the element that is cutting off the descenders. ``

share|improve this answer
Interesting. line-height didn't work for me at all, but certain pixel sizes did. Those em sizes might not be quite right for you if your base font size is different. –  Olly Hodgson May 31 '12 at 15:09
add comment

Your Answer


