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

Asked 3/6, 2010 at 14:45 Answered 20/2, 2016 at 2:2

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>
<html>
<head>
 <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; }
 </style>
</head>    
<body>
 <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>
</body>
</html>

The above code looks like this:

_{(source: thinkdrastic.net)}

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?

Cheapskate answered 3/6, 2010 at 14:45 Comment(4)

Works fine on MacOS WebKit. Have you tried giving a bigger margin? – Lampoon 3/6, 2010 at 14:50

Yep. I suspect this is going to be one of those "that's just how Windows does stuff" questions. – Cheapskate 3/6, 2010 at 14:54

This might just be a copy-paste error, but font-family: "Droid Sans"sans-serif; needs a comma. – Sweated 3/6, 2010 at 16:38

@Sweated Good catch. I ripped out all the fallback fonts for simplicity's sake, but removed a little too much :) – Cheapskate 3/6, 2010 at 16:41

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:

_{(source: thinkdrastic.net)}

Cheapskate answered 3/6, 2010 at 16:35 Comment(3)

This probably means things will fail again at any kind of zoom, or on a non-standard resolution display. – Crider 21/6, 2010 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 :) – Cheapskate 22/6, 2010 at 10:7

Had the same issue with a font 'Walkway' and the magic 1.6875em figure worked for that too...odd systematic fault – Melanson 16/11, 2011 at 17:55

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.

Anthropophagy answered 10/5, 2012 at 13:41 Comment(3)

This did not seem to work for me. I successfully changed these metrics in fontforge, but the problem persists. – Metro 29/5, 2012 at 15:40

Can you send me the font, I'll have a look at why this isn't working. – Anthropophagy 31/5, 2012 at 13:25

This just helped me find a problem with a font I created with MyScriptFont.com. The OS/2 metric was set to a wrong value. Thx. – Cards 2/2, 2017 at 19:25

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.

Badlands answered 3/6, 2010 at 14:45 Comment(1)

So they do. I wonder if this is an issue with the fonts or with Windows font rendering? – Cheapskate 3/6, 2010 at 15:8

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

Calandracalandria answered 12/4, 2013 at 16:29 Comment(1)

That did not solve it for me. I had the problem at 14.8-15.2 px (IE) / 15.0 - 15.1 px (Chrome, Firefox) with Open Sans. Even after setting the em square value from 2048 to 2162, that problem persisted. Maybe trying even bigger values might have worked, but I suppose I'll opt for just avoiding the problem range. – Tuneful 20/4, 2015 at 11:27

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.

Kalikow answered 16/12, 2011 at 6:27 Comment(0)

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. ``

Elfont answered 31/5, 2012 at 14:19 Comment(1)

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. – Cheapskate 31/5, 2012 at 15:9

I'm just guessing here, but I've had the same problem occur when fonts get substituted. I just wonder if this occurs when say a font substitution replaces a 1024em font with a 1000em font or vice-versa. I had some major descender cut-off using a 2048em font. Might be worth investigating.

Diandiana answered 20/2, 2016 at 2:2 Comment(0)

-2

I had a similar dilemma and the line-height fix worked for me (i.e. I added this code to the Custom CSS section):

h2 { line-height: 140%; }

Musket answered 23/12, 2014 at 22:32 Comment(0)

Recommended topics

Hot tags