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

1 Views

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; 
}
Post Views: 1

Related posts

Leave a Reply

2 comments

  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.

  2. 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.