Fonts are an essential aspect of web design that help improve readability and visual appeal. In HTML, you can control font styles, sizes, colors, and families using both HTML attributes (deprecated) and modern CSS.
This tutorial covers:
- How fonts were handled in HTML using the <font> tag (deprecated).
- Modern font styling using CSS.
- Using Google Fonts for custom fonts.
- Examples of font styling.
1. The Deprecated <font> Tag
In older HTML versions, the <font> tag was used to define font size, color, and family. However, it is now deprecated in favor of CSS.
Example 1: Using the <font> Tag (Not Recommended)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Deprecated Font Example</title>
</head>
<body>
<font face="Arial" size="4" color="blue">This is Arial text with size 4 and blue color.</font>
<br>
<font face="Times New Roman" size="5" color="red">This is Times New Roman with size 5 and red color.</font>
</body>
</html>
- Output:
The text will appear in the specified font family, size, and color. - Why Avoid?
The <font> tag is no longer supported in HTML5 and is bad for accessibility and maintainability. Use CSS instead.
2. Modern Font Styling with CSS
CSS provides powerful ways to style fonts with the following properties:
- font-family: Specifies the font type.
- font-size: Defines the size of the font.
- color: Sets the font color.
- font-weight: Determines the boldness of the text.
- font-style: Adds styles like italic.
- text-transform: Controls uppercase, lowercase, or capitalize text.
Example 2: Basic Font Styling Using CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Font Styling</title>
<style>
.title {
font-family: Arial, sans-serif;
font-size: 36px;
color: darkblue;
font-weight: bold;
}
.subtitle {
font-family: 'Times New Roman', serif;
font-size: 24px;
color: darkgreen;
font-style: italic;
}
.small-text {
font-size: 14px;
text-transform: uppercase;
color: gray;
}
</style>
</head>
<body>
<h1 class="title">Welcome to My Website</h1>
<h2 class="subtitle">This is a Subtitle</h2>
<p class="small-text">this text is styled to appear small and uppercase.</p>
</body>
</html>
Explanation:
- font-family sets different font families (fallback options included).
- font-size controls the text size.
- font-weight: bold makes the text bold.
- text-transform: uppercase converts text to uppercase.
3. Using Google Fonts for Custom Fonts
You can use Google Fonts to include custom fonts on your webpage. This allows you to access thousands of free fonts.
Steps to Use Google Fonts:
- Visit Google Fonts and choose a font.
- Add the provided <link> tag in the <head> section of your HTML.
- Use the font in your CSS.
Example 3: Using Google Fonts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts Example</title>
<!-- Importing Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
.fancy-font {
font-family: 'Lobster', cursive;
font-size: 32px;
color: purple;
}
.clean-font {
font-family: 'Roboto', sans-serif;
font-size: 18px;
line-height: 1.5;
}
</style>
</head>
<body>
<h1 class="fancy-font">This is a Fancy Font</h1>
<p class="clean-font">This text uses the Roboto font, which is clean and easy to read.</p>
</body>
</html>
Explanation:
- The <link> tag loads the Google Fonts (Lobster and Roboto) into the webpage.
- font-family: ‘Lobster’, cursive; applies the fancy font.
- line-height is added to improve readability for paragraph text.
4. Combining Multiple Font Styles
You can use different fonts, sizes, and weights for various parts of your text to create a visually appealing page.
Example 4: Multiple Font Styles
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiple Font Styles</title>
<style>
h1 {
font-family: Georgia, serif;
font-size: 40px;
color: navy;
}
h2 {
font-family: Verdana, sans-serif;
font-size: 30px;
font-weight: bold;
color: teal;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
color: black;
line-height: 1.8;
}
</style>
</head>
<body>
<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>This paragraph is styled with a clean sans-serif font for better readability. You can mix and match fonts to achieve the look you want on your webpage.</p>
</body>
</html>
Output:
- <h1> uses the serif font Georgia with large size and navy color.
- <h2> uses Verdana with bold weight and teal color.
- Paragraphs have a readable Arial font with proper line-height.
5. Best Practices for Fonts
- Use Web-Safe Fonts: Always provide fallback fonts like serif or sans-serif in case the primary font fails to load.
- Limit Font Styles: Avoid using too many different fonts, as it can make your page look messy.
- Use Readable Sizes: Ensure your text is large enough to be readable (e.g., 16px for body text).
- Include Line-Height: Add spacing between lines for improved readability.
- Load Custom Fonts Efficiently: Use tools like Google Fonts to include fonts without slowing down page load times.
Conclusion
HTML combined with CSS allows you to style fonts effectively. Avoid deprecated tags like <font> and use modern CSS properties instead. By integrating tools like Google Fonts, you can access a wide variety of beautiful and functional font styles.
Now that you’ve seen several examples, experiment with different styles and custom fonts to make your webpage visually appealing