jQuery working out wrong height, due to @font-face

Question

I have a problem with jQuery and @font-face.

I need to work out the height of a <div>, which works fine, but then there is a small delay for the fonts to load and as soon as they do, the @font-face fonts were actually bigger than the fallback fonts, so the height is smaller than it should be.

I have tried using Modernizr, but that is no use as it only detects if the browser is capable of @font-face, not whether the fonts have loaded yet or not.

The jQuery code is in document.ready, but I guess fonts don't delay that from firing. Any ideas anyone?

Answer 1

You might want to check out the Google Font API (http://code.google.com/apis/webfonts/docs/webfont_loader.html). I believe it dynamically loads the font and fires off a number of events that you can act on (for resizing your 's).

Answer 2

The Google font api looks like it works as long as you load fonts from google, typekit or ascender. But if you are using something else (e.g. another font downloaded from fontsquirrel) you might want to try something like this to figure out the font being rendered. You may also want to check out this discussion on determining the font being used http://stackoverflow.com/questions/1271477/changing-body-font-size-based-on-font-family-with-jquery

Answer 3

The perfect solution was, as Adam pointed out, using window.load instead of document ready.

$(window).load(function(){  
  $(".column").equalHeights();
});