Bottom of custom font cut off in Opera and webkit

Asked 20/12, 2011 at 14:16 Answered 9/12, 2014 at 21:6

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

Ballyhoo answered 20/12, 2011 at 14:16 Comment(6)

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. – Raseta 20/12, 2011 at 14:22

Looks fine in Chrome on Vista. Maybe -webkit-font-smoothing helps? – Humanity 20/12, 2011 at 14:24

@Humanity Thanks, but that does not seem to do anything with any of the values shown in the article. At least on my page... – Ballyhoo 20/12, 2011 at 14:37

Looks good on OS X in Opera and Webkit, so it must be Windows-specific issue. – Rimbaud 22/12, 2011 at 22:44

@Rimbaud Thanks, I've opened the page in Chrome on Ubuntu and it is fine, it is indeed a windows problem. – Ballyhoo 23/12, 2011 at 14:28

I just viewed it on Chrome 16 in Windows, and it's fine for me. – Lili 29/12, 2011 at 19:10

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.

Ballyhoo answered 23/12, 2011 at 14:35 Comment(6)

this works and yes - its blurry - albeit good solution till we find a better one. – Emelun 26/12, 2011 at 9: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. – Helico 27/12, 2011 at 7:15

@Helico 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... – Ballyhoo 27/12, 2011 at 14:9

I don't know if that's what it's supposed to do, but it's definitely not what it actually does. 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. – Helico 27/12, 2011 at 19:33

This worked for me to fix FontAwesome for Twitter Bootstrap in Chrome. Thanks! – Despondent 8/8, 2012 at 20:39

font-weight: normal; just fixed my issue. – Crafton 29/7, 2013 at 14: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...

Phototransistor answered 22/12, 2011 at 22:22 Comment(9)

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! – Ballyhoo 23/12, 2011 at 14:37

Sorry for the delayed response @jeroen. Check my edited answer above. – Phototransistor 27/12, 2011 at 5: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? – Ballyhoo 27/12, 2011 at 15:9

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? – Phototransistor 27/12, 2011 at 15:50

I have, putting the ttf first or removing it completely does not make any difference in Chrome at least. – Ballyhoo 27/12, 2011 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? – Phototransistor 27/12, 2011 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... – Phototransistor 27/12, 2011 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. – Ballyhoo 27/12, 2011 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. – Ballyhoo 28/12, 2011 at 22:57

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

Coley answered 21/12, 2011 at 22:55 Comment(1)

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. – Ballyhoo 21/12, 2011 at 23:0

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

Centring answered 26/12, 2011 at 21:40 Comment(9)

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. – Centring 26/12, 2011 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? – Ballyhoo 26/12, 2011 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 – Centring 26/12, 2011 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. – Ballyhoo 26/12, 2011 at 22:1

I cannot reproduce on Google Wenfonts – Centring 26/12, 2011 at 22:3

Very strange, are you on Windows 7 64bit? – Ballyhoo 26/12, 2011 at 22:4

Windows 7 64bit version yes. I uploaded a screenshot – Centring 26/12, 2011 at 22:7

Hmmmmm, I have added a screenshot from Google Webfonts to the question. – Ballyhoo 26/12, 2011 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 jsfiddle.net/DdMej/3 – Centring 27/12, 2011 at 7:40

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.

Mot answered 9/12, 2014 at 21:6 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags