Search code examples
javascriptjqueryfont-face

jQuery - Detect when custom font has loaded?

I need to measure the navigation of my site to determine the space available for a feature I am building. I recently added a custom font...

The trouble is that I measure the navigation before the new font is loaded. The new font then loads altering the width of the navigation. I am then left with an incorrect width.

Is there a way I can determine when the font has loaded with JavaScript. I am using CSS to load the font.

Solution

  • I assume you are waiting on $(document).load before running your jquery? This just waits for the DOM to become accessible. If you want to wait until the entire webpage (and associated files) are ready, use $(window).load:

    $(window).bind("load", function() {
       //nav resize code here
});

    I wouldn't wrap your entire code in this, just the part that is dependent on the fonts.