How to know when font-face has been applied
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.
ES6 update:
The question post is for many years ago which the IEs version 8 and earlier were still alive and even Ecmascript version 6 was not released, but now you can write callbacks on document.fonts
events. eg:
document.fonts.onloadingdone = () => { // do something after all fonts are loaded};
For more information see this post.
Setting the function to trigger after a timeout of 200ms solves this issue when using Google Fonts.
There's a noticeable jump, but there usually is for equal heights stuff, for the purists this might not be perfect but it works cross browser.