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

7 Comments

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

Submit a Comment

Your email address will not be published.