Minimizing or eliminating Cufon delayed replacement (text "flashing" or "flickering")

Question

I'm trying the technique graham has shared on this topic (http://j.mp/cy6IRR) and I know I'm doing something super bonehead here. I'm hoping to get some help from someone that's successfully dealt with this Cufon issue. I'm seeing the flicker in all browsers it seems.

Cufon JS Call in

function initCufon() {
    Cufon.replace('#content h2', { fontFamily: 'Liquorstore'});
    Cufon.now();  
    $("#content h2").css("z-index","0");
}
$(document).ready(function(){
 initCufon();
});

---

CSS

#content h2{
 margin:0;
 font-size:36px;
 line-height:36px;
 color:#980037;
 width:100%;
 overflow:hidden;
}
.js #content h2{text-indent:-9999px;}

---

HTML

<!-- main content -->
                <div id="content">
                    <!-- content heading -->
                    <div class="main-heading">
                        <h2>Page Title</h2>
                        <script>document.documentElement.className = 'js';</script>
<!--NOTE: I forgot to add the line above in my original question post-->

---

P.S. I'm new to Stack Overflow and please school me if I was supposed to post this in the thread that prompted it. I'm assuming not though because it certainly ain't an "answer"!

Thanks in advance!

Answer 1

Did you add this line just below your <h2>?

Add document.documentElement.className = 'js'; just below your tag.