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
Selected Reading
How to set fontStyle, fontVariant, fontWeight, fontSize, lineHeight, and fontFamily in one declaration with JavaScript?
To set all the font properties in a single declaration, use the JavaScript font property. This shorthand property combines fontStyle, fontVariant, fontWeight, fontSize, lineHeight, and fontFamily into one statement.
Syntax
element.style.font = "fontStyle fontVariant fontWeight fontSize/lineHeight fontFamily";
Font Property Components
The font property accepts values in a specific order:
- fontStyle: normal | italic | oblique
- fontVariant: normal | small-caps
- fontWeight: normal | bold | lighter | bolder | 100-900
- fontSize: Required value (px, em, %, etc.)
- lineHeight: Optional, follows fontSize with "/" separator
- fontFamily: Required font name(s)
Example
<!DOCTYPE html>
<html>
<body>
<h1>Font Property Demo</h1>
<p id="myText">
This is sample text that will be styled using the font shorthand property.
Click the buttons below to see different font combinations.
</p>
<button onclick="setFont1()">Italic Bold Serif</button>
<button onclick="setFont2()">Small-caps Sans-serif</button>
<button onclick="resetFont()">Reset</button>
<script>
function setFont1() {
document.getElementById("myText").style.font = "italic normal bold 18px/1.5 'Times New Roman', serif";
}
function setFont2() {
document.getElementById("myText").style.font = "normal small-caps normal 16px/1.2 Arial, sans-serif";
}
function resetFont() {
document.getElementById("myText").style.font = "";
}
</script>
</body>
</html>
Multiple Font Declarations
You can set different font combinations for various elements:
<!DOCTYPE html>
<html>
<body>
<p id="text1">Text with custom font styling</p>
<p id="text2">Another text with different styling</p>
<p id="text3">Third text with line-height specified</p>
<script>
// Set different font properties
document.getElementById("text1").style.font = "italic bold 20px Verdana, sans-serif";
document.getElementById("text2").style.font = "normal small-caps 600 14px Georgia, serif";
document.getElementById("text3").style.font = "oblique normal normal 16px/2.0 'Courier New', monospace";
</script>
</body>
</html>
Key Points
- Required values: fontSize and fontFamily must be specified
- Order matters: Values must follow the correct sequence
- Line height: Use "/" separator between fontSize and lineHeight
- Font families: Use quotes for multi-word font names
- Fallback fonts: Always include generic family names (serif, sans-serif, monospace)
Comparison with Individual Properties
| Method | Code Length | Readability | Performance |
|---|---|---|---|
| font shorthand | Short | Compact | Single property access |
| Individual properties | Long | Clear | Multiple property accesses |
Conclusion
The font shorthand property provides an efficient way to set multiple font properties at once. Remember that fontSize and fontFamily are required, while other values are optional but must follow the correct order.
Updated on: 2026-03-15T23:18:59+05:30
156 Views
Advertisements