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 */
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; }
}
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!