Let me first make it clear that I am not trying to discourage developers from using web fonts. Like any web designer out there, I am very excited about the possibilities that services like Typekit have made available to the masses. No longer are we stuck with Georgia and Verdana as our only font options for every site. Web fonts are fantastic! I'm glad we cleared that up, let's move on.
Web fonts breaking DOM object positions explained
The code I used to store the object positions was executed on the DOM load event. Technically this is the moment that the browser has loaded its content and rendered the page. This is when all of the object positions are supposed to be final. Except that when using web fonts, the page isn't finished rendering yet.
Web font loading happens after the DOM has completed loading. Once the fonts have finished loading, the text is re-rendered using the downloaded fonts. This is why on some sites you see the text shift around shortly after the page has loaded.
Since I was getting object positions before the fonts were loaded, the positions I saved were not valid. They were not the positions of the objects once the fonts were loaded and the text had finished moving. And because the shifting gets larger the further down the text you go, the offsets in my demo were bigger the further down the page I placed it.
So what is the solution?
Well one way to fix it would be to continuously get the object positions. This way the position you have will always be correct. The problem is that constantly polling the browser for current object positions places an unnecessary load on the browser and can slow your scripts.
Thanks to the hard-working guys at Typekit, there is a better way. Instead of constantly polling for the current positions and offsets, you only have to get them once, right after the web fonts have finished rendering and all of the object positions are final. Typekit makes this easy with its font event callbacks.
To fix my demos, I simply added an event handler that updates the object positions once the web fonts are rendered. I've included a snippet of the code so you can see how it works.