Question

Initially cufon replaces the main page text.

After loading another page file, cufon doesn’t apply it’s replacement to the newly loaded content. Why?

I added cufon.refresh(); as the very last of the chained functions. I notice cufon is trying to replace the font, how ever it seems like the default font is overriding the cufon font. I notice the cufon changed font briefly before it defaults back to the regular font. So I know it’s attempting to replace the text.

Maybe my order of operations are wrong? Any help is appreciated. If my code is messy as is, feel free to clean it up, always open for suggestions.

Here’s my code:

$(document).ready(function(){
    $.ajaxSetup({cache:false});
    // Hide Colored Lines                      
    $("div#line-2,div#line-3,div#line-4,div#line-5,div#line-6,div#line-7,div#line-8,div#line-9,div#line-10").hide();
    $("div#linksContainer a, div#meContainer a").click(function(){
        var toLoad = $(this).attr('href')+' #homeContent';                               
        var post_id = $(this).attr("rel");
        if(post_id == "25"){
            $("#home").fadeIn(2400);
            $("div#line-1").animate({height: 'toggle'},1200);   
            $("div#line-2,div#line-3,div#line-4,div#line-5,div#line-6,div#line-7,div#line-8,div#line-9,div#line-10").hide();
        }else if(post_id == "5"){
            $("#home").hide('fast');
            $("div#line-2").animate({height: 'toggle'},1200);
            $("div#line-1,div#line-3,div#line-4,div#line-5,div#line-6,div#line-7,div#line-8,div#line-9,div#line-10").hide();
        }else if(post_id == "7"){
            $("#home").hide('fast');
            $("div#line-3").animate({height: 'toggle'},1200);
            $("div#line-2,div#line-1,div#line-4,div#line-5,div#line-6,div#line-7,div#line-8,div#line-9,div#line-10").hide();
        }else if(post_id == "337"){
            $("#home").hide('fast');
            $("div#line-4").animate({height: 'toggle'},1200);
            $("div#line-2,div#line-3,div#line-1,div#line-5,div#line-6,div#line-7,div#line-8,div#line-9,div#line-10").hide();
        }else if(post_id == "13"){
            $("#home").hide('fast');
            $("div#line-5").animate({height: 'toggle'},1200);
            $("div#line-2,div#line-3,div#line-4,div#line-1,div#line-6,div#line-7,div#line-8,div#line-9,div#line-10").hide();
        }else if(post_id == "339"){
            $("#home").hide('fast');
            $("div#line-6").animate({height: 'toggle'},1200);
            $("div#line-2,div#line-3,div#line-4,div#line-5,div#line-1,div#line-7,div#line-8,div#line-9,div#line-10").hide();
        }else if(post_id == "341"){
            $("#home").hide('fast');
            $("div#line-7").animate({height: 'toggle'},1200);
            $("div#line-2,div#line-3,div#line-4,div#line-5,div#line-6,div#line-1,div#line-8,div#line-9,div#line-10").hide();
        }else if(post_id == "212"){
            $("#home").hide('fast');
            $("div#line-8").animate({height: 'toggle'},1200);
            $("div#line-2,div#line-3,div#line-4,div#line-5,div#line-6,div#line-7,div#line-1,div#line-9,div#line-10").hide();
        }else if(post_id == "11"){
            $("#home").hide('fast');
            $("div#line-9").animate({height: 'toggle'},1200);
            $("div#line-2,div#line-3,div#line-4,div#line-5,div#line-6,div#line-7,div#line-8,div#line-1,div#line-10").hide();
        }else if(post_id == "16"){
            $("#home").hide('fast');
            $("div#line-10").animate({height: 'toggle'},1200);
            $("div#line-2,div#line-3,div#line-4,div#line-5,div#line-6,div#line-7,div#line-8,div#line-9,div#line-1").hide();
        }
        $('#homeContent').hide('fast',loadContent);
        $('#load').remove();
        $('#wrapper').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        function loadContent(){
            $("#homeContent").load(toLoad,{id:post_id},showNewContent());
        }
        function showNewContent(){
            $("#homeContent").show('fast',hideLoader());
        }
        function hideLoader() {
        $('#load').fadeOut('normal',changeFonts());
        }
        function changeFonts(){
            Cufon.refresh();    
        }
        return false;
    });
Cufon.replace('h1, h2, p, strong', { fontFamily: 'Museo 300' });  
Cufon.replace('h3, h4, h5, h6, #postContent a', { fontFamily: 'Quicksand Book' });
});

Answer 1

change

$('#load').fadeOut('normal',changeFonts());

to

$('#load').fadeOut('normal',changeFonts);

and it should be alright.

Same goes for your other animation/load callbacks, you want to pass the function objects, not their return value.