Grow your CSS skills. Land your dream job.

@font-face rendering issue in Chrome for PC

  • # December 12, 2011 at 2:26 pm

    I used font-squirrel to embed a font onto a site (with Apply Hinting selected), and it’s not rendering properly in Chrome v15.0 for PC. The font shows, but poorly. I’m sure that font-squirrel gave me the right code, so I assume there is a conflict in my CSS. Thanks in advance for your help.

    Screenshot

    Link to site

    @font-face {
    font-family: 'RockwellStd-Light';
    src: url('rockwellstdlight-webfont.eot');
    src: url('rockwellstdlight-webfont.eot?#iefix') format('embedded-opentype'),
    url('rockwellstdlight-webfont.woff') format('woff'),
    url('rockwellstdlight-webfont.ttf') format('truetype'),
    url('rockwellstdlight-webfont.svg#RockwellStdLight') format('svg');
    font-weight: lighter;
    font-style: normal;

    }

    h1 {
    font-family:'RockwellStd-Light', Helvetica, Ariel;
    font-size:34px;
    color:#407d3b;
    font-weight:lighter;
    margin-left:20px;

    }

    h2 {
    font-family:'RockwellStd-Light', Helvetica, Ariel;
    font-size:32px;
    color:#ece1af;
    font-weight:lighter;
    line-height:42px;

    }

    h3 {
    font-family:'RockwellStd-Light', Helvetica, Ariel;
    font-size:20px;
    color:#FFF;
    font-weight:lighter;

    }

    p {
    font-family:'RockwellStd-Light', Helvetica, Ariel;
    font-size:14px;
    line-height:17px;
    color:#333;
    text-align:justify;

    }

    .criteria_table {
    font-family:'RockwellStd-Light', Helvetica, Ariel;
    font-size:14px;
    color:#FFF;

    }
    # December 12, 2011 at 2:38 pm

    The rendering looks fine to me.

    # December 12, 2011 at 3:15 pm

    I’ve added a link to a screenshot above

    # December 12, 2011 at 4:10 pm

    Yup, that’s how Chrome renders the font, unfortunately.

    Give this a read: http://blog.typekit.com/2011/01/26/css-properties-that-affect-type-rendering/

    You could try seeing if using -webkit-font-smoothing: antialiased; helps at all.

    # December 12, 2011 at 4:40 pm

    No luck with -webkit I’m afraid. Also no luck with the text-shadow hack

    # December 12, 2011 at 5:00 pm

    SOLVED: by adding text-shadow with these values

    text-shadow: 0 1px 0 rgba(0,0,0,0.01);

    # December 12, 2011 at 8:22 pm

    @Rockomole This is odd because I’m still seeing the issue. I’m using Rockwell Std-Light on my site as well however, I’m not getting this issue. I’m wondering if it’s the way you’re embedding it. What I get on my site is the same shown here.

    # December 12, 2011 at 10:00 pm

    try removing the font-weight property in the css selectors rules. You can leave it for the @font-face but will not need it unless you have more @font-faces with the same name. It is not needed in the css tags selectors since you are calling the only font family with that name and it is already a ligher font…so defining font-weight is not needed.

    Not saying this will cure the issue but worth a shot.

    # June 5, 2012 at 4:56 pm

    I came across a better solution recently, so just wanted to update it here :)

    Add this as a new CSS rule after the @font-face rule

    @media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
    font-family: 'FONT-NAME';
    src: url('RELATIVE-FONT-URL') format('svg');
    font-weight: normal;
    font-style: normal;
    }}
    # August 6, 2012 at 4:28 pm

    If any of you are still looking to improve your webfont rendering in Chrome, you may want to take a look at this post on our blog. It does have a solution similar to @rockomole‘s suggestion: http://www.fontspring.com/blog/smoother-web-font-rendering-chrome

    # August 6, 2012 at 8:31 pm

    I recently read that John Hoefler reported a bug in Chrome that has to do with rendering fonts. Not sure what exactly it consists of – still waiting to hear back.

    Edit: It’s unrelated.

    # August 13, 2012 at 2:20 am

    Chrome was cutting my icons in half. IE wasn’t working because of a bad woff conversion. Another long day.

    Paul Irish’s worked for me:


    @font-face {
    font-family: 'MobileIcons';
    src: url('MobileIcons.eot');
    src: url('MobileIcons.eot?#iefix') format('embedded-opentype'),
    url('MobileIcons.svg#MobileIcons') format('svg'),
    url('MobileIcons.woff') format('woff'),
    url('MobileIcons.ttf') format('truetype');
    }

    And I found this link, so watch out for sneak Arial attacks:

    http://sixrevisions.com/css/font-face-web-fonts-issues/

    # October 8, 2012 at 9:27 pm

    None of the above work, sorry. I am using Drupal CMS and all my sites have fonts [both @font-face and standard body text] that are bleeding out around the edges in Chrome only, any suggestions?

    # October 8, 2012 at 9:28 pm

    @cherie Link?

    # October 8, 2012 at 9:34 pm

    Just tried: -webkit-text-stroke: 1px transparent but no luck. The link is, http://majellagt.com.

    Thanks

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

You must be logged in to reply to this topic.

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