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 set text font family in HTML?
To change the text font family in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property font-family. HTML5 does not support the <font> tag, so CSS styles are used to control font appearance.
Keep in mind that the usage of the style attribute overrides any style set globally. It will override any style set in the HTML <style> tag or external style sheet.
Syntax
<element style="font-family: font1, font2, generic-family;">
Content here
</element>
Example: Basic Font Family
Here's how to change the text font family using inline CSS:
<!DOCTYPE html>
<html>
<head>
<title>HTML Font Family</title>
</head>
<body>
<h1>Our Products</h1>
<p style="font-family:georgia,garamond,serif;">
This text uses Georgia font family with serif fallback.
</p>
<p style="font-family:arial,helvetica,sans-serif;">
This text uses Arial font family with sans-serif fallback.
</p>
<p style="font-family:'Courier New',courier,monospace;">
This text uses Courier New monospace font.
</p>
</body>
</html>
Output
Our Products This text uses Georgia font family with serif fallback. This text uses Arial font family with sans-serif fallback. This text uses Courier New monospace font.
Common Font Families
| Font Type | Font Family | Generic Fallback |
|---|---|---|
| Serif | georgia, times | serif |
| Sans-serif | arial, helvetica | sans-serif |
| Monospace | 'Courier New', courier | monospace |
Using CSS Style Tag
For better practice, use the <style> tag instead of inline styles:
<!DOCTYPE html>
<html>
<head>
<title>Font Family with CSS</title>
<style>
.serif-text {
font-family: georgia, garamond, serif;
}
.sans-serif-text {
font-family: arial, helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>Font Family Examples</h1>
<p class="serif-text">This paragraph uses serif fonts.</p>
<p class="sans-serif-text">This paragraph uses sans-serif fonts.</p>
</body>
</html>
Key Points
- Always provide fallback fonts in case the primary font is unavailable
- Use quotes around font names that contain spaces
- End with a generic font family (serif, sans-serif, monospace)
- CSS styles are preferred over inline styles for maintainability
Conclusion
Setting font family in HTML requires the CSS font-family property, either inline or in a style sheet. Always include fallback fonts to ensure consistent display across different systems.
28K+ Views
