I found a solution after wondering why IE doesn’t suffer from this problem.
Firefox and Chrome/Safari triggers the DOMContentLoaded
event before font-face is applied, thus causing the problem.
The solution is to not listen for DOMContentLoaded
but instead go oldschool and listen to onreadystatechange
and wait until the document.readyState === 'complete'
which is always triggered after font-face is applied (as far as I can tell by my tests) – which is of course what always happens in IE since it doesn’t support DOMContentLoaded
.
So basically you can roll-your-own event in jQuery called fontfaceapplied
– maybe it should be built in 😉
document.onreadystatechange = function() {
if (document.readyState === 'complete')
$(document).trigger('fontfaceapplied');
};
Funny fact: Opera does it right and waits to trigger DOMContentLoaded
until font-face is applied.