Calculate container height after loading font files

Question

Styling custom font web pages using @font-face requires the browser to first download the font file (just like it loads other assets, such as CSS, JavaScripts, etc.) before the actual execution occurs.

This indicates a problem with Chrome (v16.0.912.63) and Safari (v5.1.2) when jQuery .height() tries to calculate the height of its container. The calculated height until the font finishes loading. Consider the following (view: working example ):

 /* CSS */ h1 { font-family: MuseoSlab-500, "Helvetica Neue", Helvetica, Arial, sans-serif; /* MuseoSlab-500 is defined using @font-face. */ } /* HTML */ <div id="box"> <h1>This is my long header. What do you think? How about now?</h1> </div> /* JavaScript */ $(function() { alert("The height of the above <div> = " + $('div#box').height()); }); 

However, Firefox (v8.0.1) is able to calculate the correct height, that is, after rendering the text using a non-standard font.

The question is whether there is a practical way to tell Chrome or, ideally, to browsers, to wait for the text to be displayed using the intended font before doing the calculations.

Using $(window).load() works, but that means waiting, for example. all images to complete the download; it slows down so much.

Answer 1

I think $(window).load() is the only way to handle what you're talking about. If the page loads too slowly, you may need to optimize your images or load them after the page loads.

Answer 2

you can try using the webfont downloader provided by google

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

When you process webfonts with this method, you can specify some javascript callbacks: in your case you need to specify a fontActive

fontactive (fontFamily, fontDescription)

Called when each requested web font loads. The fontFamily parameter is the name of the font family, and fontDescription is the font style and weight.

Please note that you can download websites from any site, not necessarily from Google, as clearly explained on this page.

In addition to google, typekit, ascender, and monotype options, there is also a custom module that can load a stylesheet from any web font provider.