Google webfont loads after div is rendered?

Question

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)

@aspiring aqib: font/woff file of the kite one font is downloaded only when the css class with font-family is called. it takes 7ms to download the woff file. but divs are constructed before that time it seems. — dinodd88, Jan 03 '13 at 10:45
well, taking 7ms for you only but will take 100ms for users having slower internet speed! — Muhammad Talha Akbar, Jan 03 '13 at 12:47

score 0 · Accepted Answer · answered Jan 03 '13 at 13:51

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?

Google webfont loads after div is rendered?

1 Answers1