On February 20, 2014, Chrome v33 was released. With this release, Chrome claimed that those dealing with the problem of Webfonts on their sites not appearing in that browser. Unfortunately, many people were still experiencing the problem.

The way the issue manifested is this:

In the Chrome browser, if you visited a website using a Webfont, the text using that font would not appear. If you refreshed the page, hovered the text menu item, inspected the source/page element, or navigated to another page within the site, the fonts would appear. The missing fonts/text would only occur on the initial page load.

That’s a huge problem, considering the first time a visitor comes to your site would be when they experience the issue. How can someone navigate your site if there are no visible menu items to choose from. How will they know what you offer if your header text is missing?

While it would be great if the Chrome update actually did fix the problem, it didn’t and we were still left with the problem. Fortunately, a user over on StackOverflow came up with a solution that not only works, but allows us to be free of reliance on the Chrome browser to fix the problem.

Simply add this code to your theme’s stylesheet, clear your Chrome browser cache, and when you view your site, all of your beautifully designed fonts will be displayed.

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

 

If that CSS doesn’t work for you, add this bit of Javascript to your theme and it should do the trick:

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

Leave a Reply

Your email address will not be published. Required fields are marked *