Bottom of custom font cut off in Opera and webkit

Question

I'm using a custom font in a page I'm developing, Droid Sans, and at certain font sizes, the bottom is cut off, but only in Opera and webkit browsers.

It's easy to reproduce on Google's own webfonts page looking for Droid Sans and showing the whole alphabet at 18px: http://www.google.com/webfonts

It's especially clear for the lower case g.

Is there some css trick / hack I can use to increase the line height / show the whole character or am I really limited to only certain sizes of the font?

line-height and padding for example don't change anything and 20px font-size works fine and at the moment I am using Windows 7.

Edit: By the way, I am aware of a similar question here but as the accepted answer is changing the font size and the rest of the answers do not apply, it is of not much use to me.

Edit 2: An example that at least for now shows the problem (left hand column, under the slideshow, Il Cerca Viaggi).

Edit 3: The problem seems to be limited to Windows although I'm not sure which versions.

Edit 4: I have added a screenshot from Google Webfonts to show that the problem is not specific to the site I'm developing.

Answer 1

I am not sure but try to add this for padding to work

display:block;
padding-bottom:20px;
margin-bottom:10px;
line-height:normal !important;
line-height:55%;

Set the line height to normal, it is a firefox bug and use the line height in % I think this might do the trick

Answer 2

It all boils down to the font itself.

Look here
http://jsfiddle.net/DdMej/2/

The first row uses Drod Sans by Google fonts. The second row uses the font you have on your site.

---

edit 1
Screenshot
http://imageshack.us/photo/my-images/811/screeniy.png/

Answer 3

Although it is not the solution I am looking for, I have found a possible solution that might work for others:

In my original style-sheet I have specified the font as follows:

@font-face {
    font-family: 'DroidSans';
    src: url('droid-sans/DroidSans-webfont.eot');
    src: local('☺'),
         url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('droid-sans/DroidSans-webfont.woff') format('woff'),
         url('droid-sans/DroidSans-webfont.ttf') format('truetype'),
         url('droid-sans/DroidSans-webfont.svg#DroidSans') format('svg');
    font-weight: normal;
    font-style: normal;
}

This is causing webkit browsers to use the woff file / format.

Changing the order of the font specifications and removing the hash-tag after the svg specification (why is that there anyway?), causes webkit browsers to use the svg file / format:

@font-face {
    font-family: 'DroidSans';
    src: url('droid-sans/DroidSans-webfont.eot');
    src: local('☺'),
         url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('droid-sans/DroidSans-webfont.svg') format('svg'),
         url('droid-sans/DroidSans-webfont.woff') format('woff'),
         url('droid-sans/DroidSans-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

This solves the problem, all characters are displayed correctly.

However, at least in Windows 7 64bit, the svg font is not as sharp as the woff font, it's kind of blurry so I will not be using this solution and am hoping for a better one.

Answer 4

To a similar question, one answer suggested that, while this appears to be a Windows font rendering issue specifically, hosting svg, eot and otf versions of a TrueType font (TTF) containing the font, which was not optimized for the web, had fixed the problem for its provider. If possible, get a clean, un-optimized version of the DroidSans font and export the web fonts yourself.

EDIT: Sorry all, I was out for the holiday and didn't have access to SO. Since I've been back, I've done a little research into exactly what's causing this problem on Windows machines...

It appears that the issue lies with the way the OpenType format is rendered on Windows machines. The issue with truncated descenders seems to transcend software type to affect multiple Windows programs attempting to render OpenType. Currently, you have the Embedded OpenType format (EOT) version of the font listed first in your CSS document under @font-face. Since Chrome and Opera both recognize this format, they'll disregard the subsequent source declarations and use EOT to display the font. Unfortunately, there doesn't seem to be a quick fix that you could apply to an OpenType font itself to force the software rendering it to allow adequate line-spacing for the lowest of its descenders on Windows machines...

However, you can be choosy about which fonts you feed to your viewers' browsers. Personally, I would recommend placing the SVG version first in your CSS, and for browsers that don't recognize this format, suggest TrueType (TTF) second, then WOFF, then EOT for browsers that don't support any of the aforementioned (some older versions of IE appear to support OpenType exculsively). If the SVG rendering isn't much to your liking, try TrueType first instead.

Alternatively, although I'm no longer really that confident that it will help, you can download a TTF of DroidSans at FontSquirrel and use a software package like Typograf to export web fonts (EOT, WOFF, SVG). Try rearranging the sources in your CSS as outlined above first, though.

ANOTHER EDIT: My erroneous use of TIFF instead of TTF has been redacted to avoid confusion in the future. Apologies for the mix-up, guys...

Answer 5

I too was seeing my Google Font 'Lato' cut off at the bottom portion of the rendered text. In my case, I needed to serve the font files locally instead of using Google Fonts. To do this I:

• Converted the font from .ttf to webfont files with Font2Web
• Served the font files locally as static file assets from the localhost
• Included fonts in my css with the bulletproof @font-face implementation

This eliminated my cut off rendered text issue.