How to Fix Google Chrome Web Fonts Issue

March 13, 2014

If you have been facing issue with web fonts not displaying properly, here are a couple of ways to get rid of them.

This bug was introduced in Chrome v33 and supposed to be fixed in next update as the bug if already reported in Chrome bug thread.

It’s needed for Chrome to repaint the browser once page is loaded to display the web fonts or external fonts. Which could be done by simply opening the Chrome Developer Tools but that can’t be done for your site visitors.

For now you can switch to browser native font by using the custom css as follows:

body, h1, h2, h3, h4, h5, h6 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Or you can also try using a simple JavaScript hack to force Google Chrome repaint which would display the web fonts properly:

jQuery.fn.redraw = function() {
    return this.hide(0, function(){jQuery(this).show()});
};
jQuery(document).ready(function() {
    jQuery('body').redraw();
});

We are eagerly waiting for Google Chrome to fix this issue, till then you try using the methods above.

Update

Here’s a neat CSS solution that you could just paste anywhere and it would fix the issue.

body {
  -webkit-animation-duration: 0.1s;
  -webkit-animation-name: fontfix;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 0.1s;
}

@-webkit-keyframes fontfix {
  from { opacity: 1; }
  to { opacity: 1; }
}
Author

Ram Ratan Maurya

10 Responses

  1. For a moment I thought it was my server problem. If the fix above doesn’t work, try this piece of code.

    $(‘body’)
    .delay(500)
    .queue(
    function(next){
    $(this).css(‘padding-right’, ‘1px’);
    }

    );

    The latter works for me.

  2. body {
    -webkit-animation-duration: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0.1s;
    }

    @-webkit-keyframes fontfix {
    from { opacity: 1; }
    to { opacity: 1; }
    }

  3. Hi,
    I’m using This font in my website. ( ‘source_sans_proregular’ )

    Its blurry in google chrome browser and all images also.
    Please let me know how can i fix it..

    Thanks.

  4. Hi,

    My problem is little different. I am having issues with classic fonts not displaying on google chrome on android devices. The list is Phoenician, classic syriaic etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.