@font-face Text is invisible in Chrome on refresh... but not always?

Using the following hack suggested in the bug report Paul Irish linked to worked for me:

.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; }}

It forces Chrome to redraw the font which appears to fix the issue.

Keep an eye on the bug report to see when you can remove this code from your production servers.

This issue is closed as of 35.0.1867.2 canary. But keep the code in until your clients are updated to this version.

According to the Chromium bug report this seems to happen when changing style sheets while loading the font. In my case, what caused the problem was a script for inserting social sharing buttons at the bottom of the page. That script caused the style sheets of the page to change.

The hack that made it work for me is:

$(document).ready(function(e) {    setTimeout(function() {        $('body').width($('body').width()+1).width('auto');    }, 500);});

This will force the body to resize so that the fonts will be redrawn. This assumes you're using jQuery and the css width of the body should be "auto". It will cause a short blink on the page when the font problem occurs, but at least the fonts are shown after that.

Hopefully this will be fixed in version 35.