CODEWITHSUNDEEP
javascriptjqueryhtmlcssfonts
Peter
Peter

Reputation: 16923

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

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?

Upvotes: 6

Views: 359

Answers (1)

bperson
bperson

Reputation: 1335

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.

Upvotes: 9

Related Questions