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

Question

My WordPress site is here: http://pangalactic.co/

When using Chrome, users find that sometimes the text below the logo, and the text relating to the site's pages (to the right of the logo) is invisible to them. If they try refresh in Chrome it remains invisible. If they click the site logo to refresh, however, the text appears again. The relevant @font-face text is below...

@font-face {
font-family: 'BebasNeueRegular';
src: url("fonts/bebas-neue/BebasNeue-webfont.eot");
src: url("fonts/bebas-neue/BebasNeue.otf");
src: url("fonts/bebas-neue/BebasNeue-webfont.eot?#iefix") format("embedded-opentype"),     url("fonts/bebas-neue/BebasNeue-webfont.woff") format("woff"), url("fonts/bebas-    neue/BebasNeue-webfont.ttf") format("truetype"), url("fonts/bebas-neue/BebasNeue-    webfont.svg#BebasNeueRegular") format("svg");
font-weight: normal;
font-style: normal; 
}

Answer 1

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.