Piestar

If you are not aware, Cufón is a font replacement system, similar to sIFR, with the advantage that it uses only Javascript rather than and Flash (As well as Javascript).

Don’t get me wrong, load times are not that horrible at all – in fact if you have only a couple of transformed elements on the page it’s nearly instant, but it does slow down in proportion to the amount of transformed items so if you do everything it’ll basically grind to a halt for a few seconds every time the page refreshes.  This is obviously not really acceptable.

The problem I was having was that there are about 10 main menu items with about 10 sub menus each.  This means it takes about 2 seconds to load in IE (it’s the slowest, unsurprisingly).  The plan was to transform only the top level items and then only do the dropdowns (it’s an accordion but that shouldn’t make a difference) when the user hovers on the top level item, rather than doing everything on page load.

Here’s the code, assuming that the main <ul> is in a <div> called #products-menu, and it follows the standard ul li a format, with the sub ul’s nested in the li’s.

    <script type="text/javascript">
        $(document).ready(function(){
            // Dynamically load cufon on drop downs
            $('#products-menu>ul>li').hover(function() {
                $(this).addClass('cufon');
                Cufon.replace('.cufon ul li a');
                $(this).removeClass('cufon');
            });
        });
        // Load Cufon on top level items only
        Cufon.replace('#products-menu>ul>li>a');
    </script>

It also uses jQuery, so you’ll need to include that in the header also.  Anyway I hope this helps someone!