typekit/webfontloader — Issue #43: 'Active' event triggers when resource is downloaded, but sometimes before it is applied in the CSS
Author: OliverJAsh
Created: 2012-01-28 16:37:56+00:00
State: open

I have a simple function that console logs the height of the document element when the Web font has loaded, using the 'active' event.

`active: function () { console.log(document.height); }`

Now, the height of the document changes as the Web fonts are loaded. I need to capture the height of the document with the Web fonts once they have loaded. However, very rarely I notice the active event triggers before the fonts have been applied to the document, which means I get an incorrect height. To test this, I added a `setTimeout` to my `active` event:

active: function () {
console.log(document.height);
setTimeout(function () { console.log(document.height); }, 1000);
}

Most of the time I will get two identical heights appear in my console, for example `500` and `500`. However, if I clear the cache and refresh the page (using Safari, hold shift and press the reload button), sometimes these heights are different. For example, `450` versus `500`. This must mean that the `450` height is actually the height of the document before the fonts are applied in the CSS, despite the fact that the `active` event is being triggered.

Like I say, this only occurs very rarely, and it happens more often when the page is loaded with a clear cache. With a clear cache, this happens every for about 1/20 refreshes.

And, it's driving me crazy!