Question

Here is a jsFiddle with my code

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.

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.

So the jQuery height is working, but only once the site has fully loaded the font-face.

Is there a work around this?

Thanks for any pointers.

SIMPLE MARKUP

<div class="home-mod">    
    <div class="mod-center"><img ... /></div>    
    <div class="mod-info"> <!-- this is the slider, slides up when .mod-info is hovered -->                    
        <a class="mod-link" href="..." title="test">DYNAMIC FONT-FACE TEXT HERE</a>

        <div class="mod-excerpt">                        
            DYNAMIC NORMAL TEXT HERE                            
        </div>            
    </div>                           
</div>

CURRENT SCRIPT – FULLY WORKING PERFECT, WHEN TEXT IS NOT FONT-FACE

$(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;            
    });                    
});

UPDATE – SOLVED

Instead of document ready, this worked for me. Slight lag on load but better than incorrect values.

$(window).load(function(){  

    // my script here...

}); 

Answer 1

Yes.

1. Simplest workaround – set line-height of text (where you want to get height) in pixels. If width of letters in fonts are similar – it will work.

2. Create 2 hidden (not through display:none, use position:absolute + top:-5000px;) divs with text + white-space:nowrap. For example 1st with monospace, 2nd with your_font,monospace font-family. Then create setInterval (50ms delay is normal) with comparison of their heights.
   When heights become different – your font is loaded and you need to clearInterval.

3. Longest way – use $(window).load