CODEWITHSUNDEEP
jquerycssfont-family
Katherine Gerot
Katherine Gerot

Reputation: 25

How to Change Font-family using JQuery's .css() function?

I have already looked here and I used what was given there to the best of my ability, but it really doesn't help.

I tried this, but it didn't help either.

Here is my JQuery (not finished with cases, but the case I have is the one I need it for):

$(document).ready(function(){
    $("#sub").click(function(){
    var initial = $('#name').val().substr(0, 1);
    var name = $('#name').val();
        switch(initial) {
            case "K":
            $("body").css("background-image", "url(background2.png)");
            $("div").css("background-color", "#eee5e5");
            $(".img").css("display", "none");
            $(".me").css("padding-top", "100px");
            $(".me").css("padding-bottom", "100px");
            $(".me").css("color", "#570000");
            $("p").css("font-family", "rebel");
            $("a").css("font-family", "rebel");
            $("#h1").css("font-family", "highway");
            break;
        }
    });
});

My #h1 in CSS (my p and a tags don't have css already):

#h1{
    background-color:#ef6d3a;
    border-style:solid;
    border-color:white;
    border-width:3px;
    font-family:hobo;
    margin-top:10px;
    margin-bottom:0px;
    width:1224px;
    right: 10;
}

And my imported fonts:

@font-face{
    font-family:peignot;
    src:url(peignot.ttf);
}
    @font-face{
    font-family:binner;
    src:url(ufonts.com_binner.ttf);
}
    @font-face{
    font-family:rebel;
    src:url(rb.ttf);
}
@font-face{
    font-family:highway;
    src:url(hth.ttf);
}
@font-face{
    font-family:hobo;
    src:url(ufonts.com_hobo.ttf);
}

Whenever I run the function, everything but the font changes. What am I doing wrong, and what do I need to do?

Upvotes: 1

Views: 1970

Answers (1)

Derreck Dean
Derreck Dean

Reputation: 3766

I pasted your stuff into a pastebin and modified it so it changes the font using built-in fonts and it worked ok. Link: http://jsbin.com/xijejelala/edit?html,css,js,console,output

Leads me to believe your font files aren't resolving properly as per Kris Oye's comment. Use F12 developer tools and go to the network tab and refresh, and check to see that your files aren't 404ing on attempted load.

Now, a potentially easier way to handle this would be to do this with the CSS: 

body.initial-k #h1 { /* styles for #h1 */ }
body.initial-k p { ... }
body.initial-d #h1 {}
body.initial-d p {}

Then use $("body").removeClass("initial-k").addClass("initial-d") to swap things around.

Upvotes: 1

Related Questions