CSS Text & Fonts
CSS Font Family
The CSS Font Family property is used to specify the typeface used to display text on a webpage.
Different fonts can significantly affect the appearance, readability, and overall design of a website. The supporting concepts are explained in CSS Font Size and Web Fonts & Typography.
CSS allows you to specify:
- A single font
- Multiple fallback fonts
- Generic font families
If the browser cannot find the first font, it will try the next font in the list.
Syntax
CSS Font Family Syntax
css
selector {
font-family: font-name;
}CSS Font Family Example
css
p {
font-family: Arial, sans-serif;
}If Arial is unavailable, the browser will use a generic sans-serif font.
Attributes
| Value | Description | Example |
|---|---|---|
| Arial | Common sans-serif font | font-family: Arial; |
| Times New Roman | Common serif font | font-family: "Times New Roman"; |
| Courier New | Monospace font | font-family: "Courier New"; |
| sans-serif | Generic sans-serif family | font-family: sans-serif; |
| serif | Generic serif family | font-family: serif; |
Example
CSS Font Family Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>CSS Font Family Example</title>
<style>
h1 {
font-family: Arial, sans-serif;
}
h2 {
font-family: "Times New Roman", serif;
}
p {
font-family: "Courier New", monospace;
}
</style>
</head>
<body>
<h1>Arial Font Example</h1>
<h2>Times New Roman Font Example</h2>
<p>This paragraph uses Courier New font.</p>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| font-family | 1 | 12 | 1 | 1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
- Always provide fallback fonts for better compatibility.
- Font names containing spaces should be enclosed in quotes.
- Generic font families include
serif,sans-serif,monospace,cursive, andfantasy. - Web fonts from services like Google Fonts can also be used.
- Choose fonts that are readable across different devices and screen sizes.
Conclusion
The CSS Font Family property allows you to control the typography of your website. By selecting appropriate fonts and providing fallback options, you can improve readability, maintain consistency, and create a more professional user experience.