The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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


    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;


    h2 {
    font-family:'RockwellStd-Light', Helvetica, Ariel;


    h3 {
    font-family:'RockwellStd-Light', Helvetica, Ariel;


    p {
    font-family:'RockwellStd-Light', Helvetica, Ariel;


    .criteria_table {
    font-family:'RockwellStd-Light', Helvetica, Ariel;

    # 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:

    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:

    # 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:

    # 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,


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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed