How can I change the font family and font size with jQuery?

jQuery Web Development Front End Technology

To change the font family and font size with jQuery, use the jQuery css() method. The css property font-family and font-size is used. You can try to run the following code to learn how to change font family and font size with jQuery −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $("p").on({
     mouseenter: function() {
        $(this).css({"font-family": "Arial, Helvetica, sans-serif", "font-size": "200%"});
     }
   });    
});
</script>
</head>
<body>
<p>Move the mouse pointer on the text to change the font family and size.</p>
</body>
</html>

Amit D

Updated on: 17-Feb-2020

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started