Change font type in a div using jquery

Question

hi i try to change the font type in a div. where there are 2 button of which user can change the font type. the font type option is in css

.fontType1{font:"Lucida Handwriting";}    
.fontType2{font:"Comic Sans MS";}

button:

<div id="greet"></div>
<div  title="fontType1" >Lucida</div>
<div  title="fontType2" >comic</div>

jquery code:

$("div").click(function (){
    $("#greet").removeClass(font);
    var font = $(this).attr("title");
    $("#greet").addClass(font);
});

help please...

Answer 1

Just a stab here, but perhaps:

.fontType1{font-family:"Lucida Handwriting";}    
.fontType2{font-family:"Comic Sans MS";}

Answer 2

Use font-family instead of font:

.fontType1{font-family:"Lucida Handwriting";}
.fontType2{font-family:"Comic Sans MS";}​

http://jsfiddle.net/SAsyK/

Answer 3

I think you better should google with Jquery Class Switcher as there is a plugin that can help you switch class in a single statement.

Answer 4

You're using a variable named font before declaring it when you call removeClass. Try something like

$("div").click(function (){
    var old_font = $('#greet').data('current_font');
    if (old_font) {
       $("#greet").removeClass(old_font);
    }
    var font = $(this).attr("title");
    $("#greet").addClass(font).data('current_font', font);
});

Also, as others pointed out, if you should only set the font family, use the font-family property. The font property is for defining all the font properties in one declaration

.fontTypeX {font-family:"Arial";}    

BTW: have you heard about browser safe fonts?