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 to Apply Global Font to the Entire HTML Document?
Sometimes we want to set a base attribute to everything and allow more specific selectors to adjust it for certain elements as needed. There are also cases, especially when doing brief temporary testing, where we want a font to apply to all text no matter what.
Syntax
/* Universal selector approach */
* {
font-family: font-name;
}
/* With !important for absolute priority */
* {
font-family: font-name !important;
}
Method 1: Using Universal Selector
We can use the CSS universal selector (*) to select your whole HTML document and define your font family. So the whole HTML document will follow that defined font family on all the elements.
Example
Here in the following example, we will use the universal selector to apply Verdana font globally
<!DOCTYPE html>
<html>
<head>
<title>Global Font Example</title>
<style>
* {
font-family: Verdana, sans-serif;
}
.container {
padding: 20px;
margin: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<h1>Global Font Applied</h1>
<p>This paragraph uses the global Verdana font.</p>
<h3>Subheading</h3>
<p>All text elements inherit the same font family.</p>
</div>
</body>
</html>
All text elements (h1, h3, p) display in Verdana font, creating a consistent typography across the entire page.
Method 2: Using !important Keyword
The CSS !important keyword will be required if you accidentally define any font family to an element that can be overridden by this !important keyword. This ensures absolute priority over any other font declarations.
Example
Here in this example, we will apply a font family using universal selector with !important and also define another font family on a particular element
<!DOCTYPE html>
<html>
<head>
<title>Important Font Override</title>
<style>
/* Has priority over all other font-family declarations */
* {
font-family: Verdana, sans-serif !important;
}
/* This won't apply due to !important above */
p {
font-family: Arial, sans-serif;
}
h1 {
font-family: Times, serif;
color: #333;
}
.content {
padding: 15px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="content">
<h1>Force Global Font</h1>
<p>This paragraph should be Arial, but !important forces Verdana.</p>
<p>All elements use Verdana regardless of specific font declarations.</p>
</div>
</body>
</html>
Despite the specific font declarations for p and h1 elements, all text displays in Verdana font due to the !important declaration overriding other font-family rules.
Key Differences
| Method | Priority | Use Case |
|---|---|---|
| Universal Selector (*) | Low priority, can be overridden | Setting base font with flexibility |
| !important Keyword | Highest priority, forces application | Absolute font control, testing |
Conclusion
The universal selector provides a flexible way to set global fonts while maintaining CSS specificity rules. Use !important sparingly as it can make future styling more difficult and reduces CSS maintainability.
662 Views
