Home/ Questions/Q 8443241
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T09:05:14+00:00

Here is the situation: $(document).ready(function(){ // this will return different result alert($(‘#foo’).width()); // than

  • 0

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 <head> section):

<link href='http://fonts.googleapis.com/css?family=Headland+One' rel='stylesheet' type='text/css'>
... 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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0