The font-family property in Cascading Style Sheets (CSS) is a powerful tool that allows web designers to control the typography of their websites. This tutorial will walk you through how to use this property effectively.
What is the CSS Font-Family Property?
The font-family property in CSS is used to specify the typeface that will be applied to a certain element. This can be any text element, such as paragraphs, headings, or links.
How To Use The Font-Family Property
To use the font-family property, you need to declare it within your CSS rule-set. Here’s an example:
body {
font-family: Arial, sans-serif;
}
In this example, ‘Arial’ is the primary font and ‘sans-serif’ is the fallback option if ‘Arial’ isn’t available on a user’s computer.
Specifying Multiple Fonts
You can specify multiple fonts by separating them with commas. The browser will use the first available font from left to right:
body {
font-family: "Times New Roman", Times, serif;
}
Using Quotation Marks
If a font name contains white space, it must be placed within quotation marks:
body {
font-family: "Courier New", Courier, monospace;
}
Generic Family Names In CSS
Besides specific family names like ‘Arial’, ‘Verdana’, etc., CSS also defines five generic family names:
- Serif: Times New Roman, Georgia, etc.
- Sans-serif: Arial, Verdana, etc.
- Monospace: Courier New, Lucida Console, etc.
- Cursive: Comic Sans MS, Pacifico, etc.
- Fantasy: Impact, western, etc.
Conclusion
The font-family property is a versatile tool in CSS that allows you to control the typography of your website. By understanding how to use it effectively and knowing the different family names available to you can greatly enhance your web design skills. Happy coding!
Related Posts
Using Multiple Background Images in CSS
CSS Background-Image Property
