A serious bug has been discovered in Chrome, which renders @font-face text as invisible until highlighted (repaint). Updating Chrome will fix this in some cases, but not all. Here is the CSS fix. I successfully circumvented the bug using the following code:
.classes-affected-by-issue
{
-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; }
}
I can confirm this bug is not present in Firefox, IE, Safari or Opera.
5 thoughts on “Chrome “invisible text” CSS bug fix (@font-face)”
Thanks for this fix, seems to work great!
Glad to hear it helped you out, Kaz! Hopefully Google pushes a fix for the bug before too long.
Unfortunately that fix didn’t work for me; Chrome is displaying text in what looks like Times New Roman that’s supposed to be in a web font, while all other browsers are displaying the correct font.
I think I’ll end up going back to “web safe” fonts — it’s just too much trouble to keep up with web fonts.
Hi there, Will. If Times is the font displaying across your site, it’s most likely due to the CSS code needing a tweak here and there. Google conveniently provides the call-to code on each Web Font’s download page, toward the bottom. Use that, and you should be up and running.
Cheers!
This seems to be still happening…? The animation trick worked nicely but shouldn’t this be fixed by now?