Introduction to HTML Fonts
Fonts determine how text looks on a webpage. They affect readability, style, and overall design.
In HTML, fonts can be applied to text using CSS (modern and recommended) or the old <font> tag (deprecated in HTML5).
Best Practice: Always use CSS to style fonts instead of the <font> tag.
Font Properties in HTML/CSS
The main font properties are:
- font-family – Specifies the typeface
- font-size – Specifies the size of text
- font-weight – Specifies boldness
- font-style – Italic or normal
- text-decoration – Underline, line-through, etc.
- color – Text color
1️⃣ font-family
Defines the font type for text.
<p style="font-family: Arial, sans-serif;">This text uses Arial</p>
- Always include a fallback font (e.g.,
sans-serif) in case the first font is unavailable. - Common web-safe fonts:
- Arial
- Helvetica
- Times New Roman
- Georgia
- Courier New
- Verdana
2️⃣ font-size
Sets the size of text. Can use pixels, em, rem, percentages, or keywords like small, medium, large.
<p style="font-size: 20px;">This is 20px text</p> <p style="font-size: 1.5em;">This is 1.5em text</p> <p style="font-size: large;">This is large text</p>
💡 Tip: Use relative units (em, rem) for better responsiveness.
3️⃣ font-weight
Controls the boldness of text.
<p style="font-weight: normal;">Normal text</p> <p style="font-weight: bold;">Bold text</p> <p style="font-weight: 100;">Thin text</p> <p style="font-weight: 900;">Extra bold text</p>
4️⃣ font-style
Controls whether text is italic or normal.
<p style="font-style: normal;">Normal text</p> <p style="font-style: italic;">Italic text</p> <p style="font-style: oblique;">Oblique text</p>
5️⃣ text-decoration
Adds styling like underline, line-through, or none.
<p style="text-decoration: underline;">Underlined text</p> <p style="text-decoration: line-through;">Strikethrough text</p> <p style="text-decoration: none;">No decoration</p>
6️⃣ font color
Text color is controlled by the color property:
<p style="color: blue;">Blue text</p> <p style="color: #ff5733;">Custom hex color text</p>
Using Google Fonts (Recommended Modern Fonts)
Google Fonts provides free fonts for websites.
- Include the font in
<head>:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
- Apply it in CSS:
<p style="font-family: 'Roboto', sans-serif;">This text uses Roboto font</p>
This is how professional websites use modern fonts.
Deprecated <font> Tag
Old HTML used the <font> tag, but it should not be used in modern HTML5.
Example:
<font face="Arial" size="4" color="red">Old font tag</font>
✅ Modern approach: Use CSS instead.
Practice Code Example
Create a webpage demonstrating:
- Different font families
- Font size variations
- Bold and italic text
- Underline and strikethrough
- Custom color
- Using Google Fonts
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Fonts Practice</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&family=Lobster&display=swap" rel="stylesheet">
</head>
<body>
<h1 style="font-family: 'Roboto', sans-serif; font-size: 36px; font-weight: bold; color: #2e86de;">
Roboto Bold Heading
</h1>
<p style="font-family: 'Lobster', cursive; font-size: 24px; font-style: italic; color: #e74c3c;">
Lobster Italic Paragraph
</p>
<p style="text-decoration: underline; font-weight: 500;">Underlined Medium Text</p>
<p style="text-decoration: line-through; font-weight: 300;">Strikethrough Thin Text</p>
</body>
</html>