Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How can I change the font family and font size with jQuery?
To change the font family and font size with jQuery, use the jQuery css() method. The CSS properties font-family and font-size are used to modify the typography of elements dynamically.
Basic Syntax
The You can try to run the following code to learn how to change font family and font size with jQuery ? You can also change font properties individually using separate Using jQuery's css()
$(selector).css({"font-family": "fontName", "font-size": "size"});
Example
<!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%"
});
},
mouseleave: function() {
$(this).css({
"font-family": "Times, serif",
"font-size": "100%"
});
}
});
});
</script>
</head>
<body>
<p>Move the mouse pointer on the text to change the font family and size.</p>
<p>This is another paragraph to test the font changes.</p>
</body>
</html>
Alternative Method
css() calls ?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#changeFont").click(function() {
$("h2").css("font-family", "Georgia, serif");
$("h2").css("font-size", "24px");
});
});
</script>
</head>
<body>
<h2>Sample Heading Text</h2>
<button id="changeFont">Change Font</button>
</body>
</html>
Conclusion
css() method makes it simple to dynamically change font family and font size properties, providing interactive typography effects for web elements.
2K+ Views
