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 Bryan,
Your site still has issues. When I initially loaded the page, the text was missing. We have the same issue on our site (canacre.com) when accessing a URL directly.
I used the following url to access your site:
spigotdesign.com/font-face-rendering-chrome/
Hopefully google fixes this issue soon.
Keith
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
Thank a lot. It worked for me.
Where did you add the code you mentioned in the 3/11/2014 Update? My Site uses wordpress.
Thanks
Brooke, I put it in
footer.phpa line up from the closing body tag (</body>).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
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!
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.
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 😉