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


    Hi Keith,

    Thanks for the heads up. Guess I better head back to the drawing board on this. Strange that it\’s so intermittent.

    ~ Bryan

    Reply

Where did you add the code you mentioned in the 3/11/2014 Update? My Site uses wordpress.

Thanks

Reply

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

Reply

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!

Reply

    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.

    Reply

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

Reply

Leave a Reply

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

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

Check out our Complete Website Package

Chat with us about your project or click below to find out more!

Learn More   Chat with us

Hi. We are Spigot. Telemarketers pronounce it Spy-got.

We are a Park City, Utah based web design shop that excels at building custom websites powered by WordPress and WooCommerce. We love content - content strategy, content curation, content soup...????Have a look around the site. As you browse you'll find useful navigation links in the sidebar on the left. We hope you find them useful anyway... Please let us know what you think, shoot us a message here.