@font-face fails to load on some requests, due to javascript?

Question

Having a weird issue,

I am testing webfonts

here is my css

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(/assets/opensans.woff) format('woff');
}

I am using the font throughout my application and have no issue expect on one page. I have a fair amount of JS on this page, the JS is positioning the elements and setting the height of the right div.

On some requests the webfont is not loading (at all)

e.g.

I can reproduce this on chrome on windows 7. But only sometimes.

Those box's should be full of text, the text you can see is where I am not using the @font-face.

I have javascript events tied to the window resize that change the width height of the right div. Interestingly when I resize the window the font seems to load.

I cannot see any errors in the console or in network tab on chrome.

Bit lost on what it could be.

Answer 1

This is a known bug with Chrome. It has been fixed, so wait for an update?

Or you can force re-painting via CSS (taken from the bug report) which should display the font:

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

or JS:

var body = document.getElementByTag("body")[0];
var disp = body.style.display;
body.style.display = 'none';
body.style.display = disp;

jQuery:

$(function() { $('body').hide().show(); });