$.width() returns different results when using custom fonts

Question

Here is the situation: ``` $(document).ready(function(){ // this will return different result alert($('#foo').width()); // than this !!! setTimeout(function(){ alert($('#foo').width()); }, 1000); }); ``` CSS (in `` section): ``` ... and #foo { font-family: 'Headland One', serif; } ``` When i use standard fonts (Arial for example) everything fine (`.width()` returning same result in both cases) Is there any workaround different than `setTimeout` to get proper `.width()` value and keep custom fonts?

Accepted Answer

Since it loads a distant font. You should use `$(window).load()` rather than `$(document).ready()` : the first one will be triggered when all the distant fonts / stylesheets / scripts and images have been downloaded, the second one only when the DOM is ready.

$.width() returns different results when using custom fonts

Solution

Problem