How to know when font-face has been applied

user_572680 0
Viewed 9854

I am currently building a corporate website for a customer that uses custom fonts extensively.

On jQuerys DOM-ready I am doing placement calculations to figure out where some pop-up menus with dynamic width and height should be placed based on their dynamic contents.

These calculations fail, since DOM-ready is fired before font-face is applied, and thus widths and heights are incorrect.

Right now (for the prototype) i am doing the calculations 500ms after DOM-ready to alleviate this problem, but this can't go into production for obvious reasons.

The problem has been observed in latest Firefox and chrome. IE 8 doesn't seem to have the problem, but then DOM-ready fires fairly late, so the delay is kind of built in I guess :)

Waiting for the load event is not an option, so my question to you is this:

Is there a reliable cross-browser way to detect when font-face has been applied?

domready font-face jquery javascript
3 Answers

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.

user_68777990
Related