Google webfont loads after div is rendered?

Possible Duplicate:
Wait for fonts to load before rendering web page

I am Adding kite one google webfont in the head of html

<link href='http://fonts.googleapis.com/css?family=Kite+One' rel='stylesheet' type='text/css'>

what i am doing:

I am constructing box like structure(like pinterest) with a div which holds content with kite one font.
And arrange the boxes just like in pinterest.

font loads slow:

after the css class with the kite one font is called the boxes load with backup font. Then boxes resizes collapsing the UI when kite one font replaces backup font.(this happens only the first time when the font is loading)

Solution

If the font is loading slowly from google try downloading it from google and hosting it on your own website.

Also investigate using the Developer Tools in Chrome and click on Network. and see how much time it is actually taking, it could be something else causing a slow load and if the fonts are loaded after the slow item it will appear that the fonts are too blame.

Also if it is the font loading slowly is it the same speed everytime? Are you on a network known for being slow or having restrictions?