Skip to main content

Forums

Home Forums CSS Getting around Chrome font display on PC

This topic contains 28 replies, has 7 voices, and was last updated by  kaloian 2 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 29 total)
  • Author
    Posts
  • #39579

    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

    #108761

    chrisburton
    Participant

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

    #108764

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

    I am using the 400 weight.

    #108765

    Paulie_D
    Moderator

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

    #108766

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

    #108775

    chrisburton
    Participant

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

    #108800

    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!

    #108803

    chrisburton
    Participant

    @speedsticksteve AA issue?

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

    #108829

    TheDoc
    Moderator

    I’m thinking AA == antialiasing.

    #131065

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

    #131074

    chrisburton
    Participant

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

    #132978

    djpysu
    Member

    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?

    #132979

    chrisburton
    Participant

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

    #132980

    djpysu
    Member

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

    #132981

    chrisburton
    Participant

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

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

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star