Getting around Chrome font display on PC

[speedstickSteve]

Hi all,

I’ve tried playing around with a bit of -webkit-font-smoothing and -webkit-text-shadow but am still suffering badly from very thin font display in Google Chrome on PC.

The font in question is a Google Web Font, which displays fine in Chrome (mac), Safari, Firefox, Opera and IE but looks awful in Chrome for PC.

As I undertand it, it’s a problem with the OS rendering the fonts differently rather than a problem within the CSS, however, does anyone have any advice on how to combat it? I don’t want to switch to a heavier weight font just to appease Chrome on pc. Is there a media selector that I could use to single out Chrome, or a hack of some sort?

Any input would be greatly appreciated!

Many thanks,

Steve

[chrisburton]

@speedstickSteve Please show us a live version or link to the typeface.

[speedstickSteve]

Hi, I don’t have a live version, still in local development stage. But the font is here.

I am using the 400 weight.

[Paulie_D]

Link doesn’t work. You could just name the font.

[speedstickSteve]

Bah, apologies, corrected the link. The font is called Quicksand.

[chrisburton]

@speedsticksteve
One thing you need to know about Google fonts is that they are usually of poor quality (unhinted and/or not optimized for screen use). This is nothing new or surprising.

Your problem could be a number of things. But try raising the font size slightly to see if that actually changes the weight in Chrome (PC).

[speedstickSteve]

I appreciate that they are often low quality, I wouldn’t mind so much if it was just an AA issue. I’ve stopped using the 300 weight of the typeface and switched to 400 as a minimum, will see if that helps!

[chrisburton]

@speedstickSteve AA issue?

Did you try raising the font-size? There is a reason I suggested this.

[TheDoc]

I’m thinking AA == antialiasing.

[paintba11er89]

Whether you’re talking about poor antialiasing on Chrome, or the font being too thin on Chrome, there is definitely a solution:

`@media screen and (-webkit-min-device-pixel-ratio:0) {}` will single out webkit driven browsers (Chrome and Safari). With this media query, you can increase the font size, AND you can use the `@font-face` directive to force the webkit browsers to take the `SVG` file-type over the `WOFF` file-type. NOTE: In the normal CSS, you’d have your cascading fonts under the `@font-face` directive, but you would eliminate all of them except `SVG` for your Webkit media query. Makes worlds of difference.

@font-face {
font-family: ‘League Gothic’;
src: url(‘../fonts/League_Gothic-webfont.svg#LeagueGothicRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

[chrisburton]

Oh, wow. My education on type has come a long way (noticing my comments from above).

@paintba11er89 Anyway, I honestly don’t think a media query is actually necessary here. I believe serving the SVG first will solve the problem. And the actual problem is that Chrome (Windows) does not render anti-aliasing on TrueType fonts.

Fix:

@font-face {
font-family: ‘MyFontFamily’;
src: url(‘myfont-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘myfont-webfont.svg#svgFontName’) format(‘svg’),
url(‘myfont-webfont.woff’) format(‘woff’),
url(‘myfont-webfont.ttf’) format(‘truetype’);
}

[djpysu]

This is a great solution.
But I have a font, called BodoniStd and this SVG hack doesn’t work. It looks crispy… at any size.. can anyone help me?

[chrisburton]

@djpysu Link? Where did you get the font? How are you serving it?

[djpysu]

test.armatti.ro (the font is in the hexagon – left) first page.

@font-face {
font-family: ‘BodoniStd’;
src: url(‘css/fonts/BodoniStd.eot’);
src: url(‘css/fonts/BodoniStd.svg#svgBodoniStd’) format(‘svg’), url(‘css/fonts/BodoniStd.woff’) format(‘woff’), url(‘css/fonts/BodoniStd.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
}
/* FONT CORRECTION */
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: ‘BodoniStd’; src: url(‘css/fonts/BodoniStd.svg’) format(‘svg’);
}
}

[chrisburton]

@djpysu Edited. Trying to find the issue now. Hold tight.

[Author]

Posts