@font-face not rendering in Chrome

Since launching the latest version of Spigot last week there has been an intermittent issue with our @font-face fonts not rendering (We serve web fonts from our servers). I initially shrugged it off as it happened so intermittently, but after a couple of others mentioned the issue it was time to get serious about it.

Issue 336476: External Font not rendering until forced repaint

Turns out it’s a real live actual bug. This thread pointed me in the right direction: Chrome issues with rendering local @fontface

There are a few fixes to be found on that thread, but this little bit of CSS fixed it for us:


body {

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

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

If you’re having trouble with Chrome (or even Safari) this bit of CSS should help. If not, check the Google thread, there’s a few javascript ideas you could also try.

3/11/2014 Update: Apparently the above code isn’t quite enough.

Since the problem seems to be so intermittent, it’s been tough to nail down and test. So here’s a bit of jQuery I’ve added just before the final </body> tag:



 jQuery(function() { jQuery('body').hide().show(); });

If you continue to experience the issue here please leave a comment, I’d appreciate any feedback. Thanks to Keith for pointing out the initial fix didn’t quite cut it.

9 thoughts on “@font-face not rendering in Chrome

  1. Apparently, your website is not the only one with the issue. This bug is so mysterious and no one seems to know how to fix it, not even the Chrome developers. It is happening and I see it everyday. If you take a look at the Tuts+ websites you can see it there. I\’m not sure if it\’s OS X specific but I\’ve been experiencing this for some time now.

    http://cl.ly/UySv

  2. I was having this issue on a client\’s website and I couldn\’t figure it out. At first I thought it was webkit FOUT but all those fixes didn\’t work either. This totally fixed my issue.

    It was a weird issue where the font would load, but initially show as the default font and snap in as soon as you changed the aspect ratio of the window, hovered or scrolled up and down.

    V strange, wondering if Chrome will address this in their next update. (I\’ve noticed SVGs haven\’t been loading right away either on websites with heavy backends).

    Thank you!

    1. Glad you were able to fix the issue John. Hopefully the Chrome team gets this fixed. I\’ve kept these bits of code in every project since, but wonder when it\’ll be safe to remove it.

  3. I\’d like to thank you for the efforts you have put in penning this website.
    I\’m hoping to see the same high-grade content from you later on as well.
    In truth, your creative writing abilities has motivated me to get my own website
    now 😉

Leave a Reply

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

Ready for a refreshing experience on your next website design?