Web Fonts Not Initially Rendered on Chrome

We were having a problem with web fonts (Google Web Font’s Open Sans and some icon fonts, specifically) not showing up when a page loads.

They were only showing after hovering over an item or a resize — in other words, after the text is re-rendered.

According to the Chrome forum, it appears to be a bug in Chrome. Here’s the most elegant fix listed from the same source.

Throw the following into your stylesheet:

/* Chromium font fix from https://code.google.com/p/chromium/issues/detail?id=336476 */
    -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; }

It seems to be declaring an animation for the body tag, which changes the opacity from 1… to 1. But that seems to be enough to trigger a re-render of the text, and thus the web fonts show up.

Hopefully they’ll fix the bug soon so this won’t be needed!