title: Font Face issue with jQuery height - incorrect value until second iteration
body: <p><a href="http://jsfiddle.net/motocomdigital/uTV5k/14/" rel="nofollow">Here is a jsFiddle with my code</a></p>
  
  <p>As you can see, the height of the text area is returned perfectly. But this is becuase the text area is not in font-face mode.</p>
  
  <p>On my site, the text is font-face generated, but it's getting the height before font-face has loaded, because once you hover the div once and the second iteration runs, it returns the correct height.</p>
  
  <p>So the jQuery height is working, but only once the site has fully loaded the font-face.</p>
  
  <p>Is there a work around this?</p>
  
  <p>Thanks for any pointers.</p>
  
  <p><strong>SIMPLE MARKUP</strong></p>
  
  <pre><code>&lt;div class="home-mod"&gt;    
      &lt;div class="mod-center"&gt;&lt;img ... /&gt;&lt;/div&gt;    
      &lt;div class="mod-info"&gt; &lt;!-- this is the slider, slides up when .mod-info is hovered --&gt;                    
          &lt;a class="mod-link" href="..." title="test"&gt;DYNAMIC FONT-FACE TEXT HERE&lt;/a&gt;
  
          &lt;div class="mod-excerpt"&gt;                        
              DYNAMIC NORMAL TEXT HERE                            
          &lt;/div&gt;            
      &lt;/div&gt;                           
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CURRENT SCRIPT - FULLY WORKING PERFECT, WHEN TEXT IS NOT FONT-FACE</strong></p>
  
  <pre><code>$(function() {
      // positioning the current div.mod-info inside current div.home-mod
  
      $(".home-mod").each(function() { 
          // this finds the div.mod-link height, and assigns var to div.mod-info top position
          var moduleLink = $(this).find(".mod-link").height(),
          modulePlus = moduleLink+20;
  
          $(this).find('.mod-info').css("top", "-" + modulePlus + "px");
      });        
  
      // animating current div.mod-info to new top position
  
      $("div.mod-info").hover(function() {
          // first iteration
          // getting dynamic overall height of div.mod-info and animate to 
  
          var moduleInfo = $(this).height();
  
          // this then animates to new position 
          $(this).animate({ top: "-" + moduleInfo + "px" });        
      }, function() {
          // second iteration
          // returns back to original postion
  
          var moduleLink = $(this).find(".mod-link").height(),
          modulePlus = moduleLink+20;
  
          $(this).animate({ top: "-" + modulePlus + "px" });        
      });
  
      // this justs finds the link and in .home-mod and make its clickable        
      $(".home-mod").click(function() {            
          window.location = $(this).find("a.mod-link").attr("href");
          return false;            
      });                    
  });
  </code></pre>
  
  <p><strong>UPDATE - SOLVED</strong></p>
  
  <p>Instead of document ready, this worked for me. Slight lag on load but better than incorrect values.</p>
  
  <pre><code>$(window).load(function(){  
  
      // my script here...
  
  }); 
  </code></pre>