Accurate Width Of Element When Using Font-face In Chromium

Hi random Stackoverflow visitor- Thanks for reading my question! Here is a minimal page that demonstrates my problem: http://lisperati.com/text_bug/text_bug.html If you visit that

Solution 1:

This is definitely a problem and it can't be solved with Google's font loader

http://code.google.com/apis/webfonts/docs/webfont_loader.html

Because it doesn't work in Safari. It would be nice to figure out why, because at the moment there seems to be no accurate way of reading a container's width and height when combined with @font-face other than adding a delay after the document.ready event. But adding a delay is still guessing and is ultimately a bad solution.

Solution 2:

Have you tried document.ready, window onload?

Also if it's related to refresh (F5) then it looks like a network issue, because a rendering issue would cause problems on every page load.

Solution 3:

I found out a partial answer by doing some more research...

The key here is to figure out when a font-face font is %100 percent active and loaded before creating the dynamic elements and checking their width. One way to do this that seems to work well is to use the Google Webfont Loader (http://code.google.com/apis/webfonts/docs/webfont_loader.html) and to place the dynamic generation code in the "fontactive" event. When done in that way it appears the text width is reliably correct in any browsers I have every time, without an arbitrary delay.

I have not found a way to do this without this font loader (though of course it must be possible, since the font loader is just a javascript library)

Solution 4:

Had the same issue, was going nuts trying to figure out why my div width values were off. Google font loader did the trick, just called all my div measuring functions after the loader's "fontactive" event popped. Worked perfect.

Solution 5:

Had also the same issue.Tested the Google Webfont Loader like previous posters mentioned.

But i found 2 issues:

• Kinda irritating that it needs to wait until the font is loaded cause it causing a "poping/jumping" when you load the page and do the font-switch.
• It worked on every browser (Latest Chrome, Firefox, IE9, Opera) except Safari. Don't know why.