Grow your CSS skills. Land your dream job.

Getting around Chrome font display on PC

  • # August 30, 2012 at 6:27 am

    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

    # August 30, 2012 at 8:09 am

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

    # August 30, 2012 at 10:04 am

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

    I am using the 400 weight.

    # August 30, 2012 at 10:18 am

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

    # August 30, 2012 at 10:25 am

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

    # August 30, 2012 at 5:17 pm

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

    # August 31, 2012 at 4:22 am

    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!

    # August 31, 2012 at 6:53 am

    @speedstickSteve AA issue?

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

    # August 31, 2012 at 1:45 pm

    I’m thinking AA == antialiasing.

    # April 8, 2013 at 5:50 pm

    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;
    }

    # April 8, 2013 at 8:39 pm

    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’);
    }

    # April 24, 2013 at 2:57 am

    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?

    # April 24, 2013 at 3:06 am

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

    # April 24, 2013 at 3:12 am

    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’);
    }
    }

    # April 24, 2013 at 3:18 am

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

Viewing 15 posts - 1 through 15 (of 28 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".