Как изменить шрифт ввода?

Question

Мне нужно переключить шрифт входного тега с помощью флажка, я попробовал использовать javascript и @ font-face для этого.

HTML:

<form action="#" method="post"> 

<input id="comment-input" type="text" class="form-control input-sm" placeholder="Press enter to post comment">     

<span class="input-group-addon sinhala"> 
Sinhala 
<input type="checkbox" aria-label="..." value="si" id="sinhala-toggle-checkbox"> 
</span> 


<button type="button" class="btn btn-sm" data-toggle="tooltip" title="" data-original-title="Mark as read">Post</button> 

</form> 

<script> 
$("#sinhala-toggle-checkbox").click(function(){ 
$("#comment-input").toggleClass("sinhala"); 
}); 
</script> 

CSS:

@font-face {font-family: sinhala; 
    src: url("malithi_web.ttf") format("truetype"); 
} 

.sinhala[type='text']{ 
    font-family: "Malithi web" !important; 
    font-size:16px; 
    font-style:normal; 
} 

Answer 1

Вы можете иметь свой новый шрифт в другом классе. Затем переключите этот класс.

.newFontClass{ 
     font-family: "Some-New-Font" !important; 
    } 

    $("#sinhala-toggle-checkbox").click(function(){  
     if($(this).is(':checked')) { 
      $("#comment-input").addClass("newFontClass"); 
     }else{ 
     $("#comment-input").removeClass("newFontClass"); 
     } 
    }); 

Answer 2

Пожалуйста, проверьте вы добавить правильный JQuery CDN в коде: -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 

Если CDN является правильным, то просто заменить скрипт я отправляю с: -

SCRIPT:

$(document).ready(function(){ 
    $("#sinhala-toggle-checkbox").click(function(){ 
    $("#comment-input").toggleClass("sinhala"); 
    }); 
}); 

Оставшийся код целиком.