12

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.

Chrome 16, Google Webfonts

Community
  • 1
  • 1
jeroen
  • 91,079
  • 21
  • 114
  • 132
  • Looks fine in Chrome on Vista. Maybe [-webkit-font-smoothing](http://maxvoltar.com/archive/-webkit-font-smoothing) helps? – ptriek Dec 20 '11 at 14:24
  • Any way you can post the styles for that font? I am looking at the google web fonts and they are loading fine in chrome and safari for me. – Rob Dec 20 '11 at 14:22
  • @ptriek Thanks, but that does not seem to do anything with any of the values shown in the article. At least on my page... – jeroen Dec 20 '11 at 14:37
  • Looks good on OS X in Opera and Webkit, so it must be Windows-specific issue. – ThinkingStiff Dec 22 '11 at 22:44
  • @ThinkingStiff Thanks, I've opened the page in Chrome on Ubuntu and it is fine, it is indeed a windows problem. – jeroen Dec 23 '11 at 14:28
  • I just viewed it on Chrome 16 in Windows, and it's fine for me. – Abhranil Das Dec 29 '11 at 19:10

5 Answers5

11

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.

jeroen
  • 91,079
  • 21
  • 114
  • 132
  • this works and yes - its blurry - albeit good solution till we find a better one. – foxybagga Dec 26 '11 at 09:34
  • IIRC it's enough to do only src: url(path/to/eot?), url(path/to/ttf);. The reasoning behind including the font in yet another format, SVG, and even yet another format, WOFF (which is probably just compressed TTF), and all those unnecessary format declarations (the filename extensions are even meaningless to the browsers) is beyond me. – reisio Dec 27 '11 at 07:15
  • @reisio It's supposed to make sure all browsers and people stuck on previous versions can see the font and as you can see, I can only get all characters to display on webkit / Windows 7 using the svg variant. Personally I'd rather use Verdana as all the problems, resizing and flashing don't really convince me... – jeroen Dec 27 '11 at 14:09
  • I don't know if that's what it's supposed to do, but it's definitely not what it *actually* does. http://is.gd/41fYRm If you want to support old versions of Internet Explorer you must include an EOT; then your choices for other browsers are WOFF (compressed TTF), ordinary TTF, or SVG (not yet implemented in Ff/IE). If Ff/IE supported SVG, you'd only need to include *one* of the three other formats (WOFF, TTF, SVG), *not all three*. Including all three of the other formats gets you nothing but unnecessary complexity—pick your favorite (of WOFF & TTF for now) & use it, skip the rest. – reisio Dec 27 '11 at 19:33
  • This worked for me to fix FontAwesome for Twitter Bootstrap in Chrome. Thanks! – Chris Clower Aug 08 '12 at 20:39
  • `font-weight: normal;` just fixed my issue. – Mikeumus Jul 29 '13 at 14:04
7

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

Community
  • 1
  • 1
Aaron
  • 5,137
  • 1
  • 18
  • 20
  • Thanks, it is indeed limited to Windows. However, I would not know where to start getting a non-optimized version of the font and converting it to other formats. I would be interested in giving it a try though, so if you have any additional information that would be great! – jeroen Dec 23 '11 at 14:37
  • Sorry for the delayed response @jeroen. Check my edited answer above. – Aaron Dec 27 '11 at 05:30
  • Thanks for the addition. Unfortunately the `svg` font makes my eyes water (see my own answer). Where do you see a tiff download on Font Squirrel? – jeroen Dec 27 '11 at 15:09
  • Oh whoops, I thought it came in the ZIP package with the TTF. Let me keep looking. In the meantime, did you try setting the TrueType version first in your CSS? – Aaron Dec 27 '11 at 15:50
  • I have, putting the `ttf` first or removing it completely does not make any difference in Chrome at least. – jeroen Dec 27 '11 at 16:16
  • I'm pretty sure it's the OpenType fonts (.EOF) that are causing your problem. Did you clear your browser cache after updating your CSS file? – Aaron Dec 27 '11 at 16:51
  • Alright, I have a confession. When I've mentioned TIFF files in the past as a font-storage format, I've been ridiculously mistaken and am pretty embarrassed at my ignorance. I'm not sure what caused me to associate TIFF with fonts, perhaps the closeness of TIF with TTF led to some synaptic short-circuit on my part. **Sorry for the confusion**, TrueType (TTF) seems to be the format from which you should export your webfonts. I'm editing my answer to avert further confusion, I just hope I haven't led anyone too far astray... – Aaron Dec 27 '11 at 17:38
  • I already thought it was strange that you were talking about a bitmap format... Anyway, if I only use the ttf in my `font-face` I have the problem already so I'm not sure if exporting / converting the ttf will do any good. I'm going to give it a try anyway. – jeroen Dec 27 '11 at 21:49
  • Thanks for the suggestion, I have given Typograf a try but there is not much I can do with it to improve the other fonts. – jeroen Dec 28 '11 at 22:57
2

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

Muhammad Ahsan
  • 1,870
  • 2
  • 20
  • 31
  • Thanks but that does not change anything except for the lay-out (margins / padding). I also don't think it is a Firefox bug as Firefox is displaying the font correctly at all sizes. – jeroen Dec 21 '11 at 23:00
1

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/
enter image description here

yunzen
  • 32,854
  • 11
  • 73
  • 106
  • There are several css declaration you could use in `@font-face` `font-family, font-size, font-stretch, font-style, font-variant, font-weight, unicode-range, units-per-em, src, ascent, bbox, cap-height, definition-src, descent, panose-1, slope, stemh, stemv, widths, x-height, baseline, centerline, mathline, topline`. Maybe you need to play around with these. – yunzen Dec 26 '11 at 21:44
  • Thanks, but in Chrome 16 I see two lines using the same font, both with the lower case `g` cut off at the bottom. What do you see? – jeroen Dec 26 '11 at 21:51
  • I see the first on with a slightly different cut Droid Sans (the one from Google), which is not cut at the bottom in both Google 16 and Opera and Safari – yunzen Dec 26 '11 at 21:57
  • The font I am using, comes from Font Squirrel, but when I go to Google Webfonts itself, I can easily reproduce the problem in both Opera and Chrome at 18px so I don't think Google has a better version than Font Squirrel. – jeroen Dec 26 '11 at 22:01
  • I cannot reproduce on Google Wenfonts – yunzen Dec 26 '11 at 22:03
  • Very strange, are you on Windows 7 64bit? – jeroen Dec 26 '11 at 22:04
  • Windows 7 64bit version yes. I uploaded a screenshot – yunzen Dec 26 '11 at 22:07
  • Hmmmmm, I have added a screenshot from Google Webfonts to the question. – jeroen Dec 26 '11 at 22:15
  • I thought maybe you have a local copy of the Droid Sans installed on your machine, which I donot have. Try with deactivating the local source in `@font-face` http://jsfiddle.net/DdMej/3/ – yunzen Dec 27 '11 at 07:40
0

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:

This eliminated my cut off rendered text issue.

pxwise
  • 1,350
  • 15
  • 16