Styling the text on a web page is an important part of web design. For instance, you may want headers to appear in a specific font, or all text on a page to use the serif font.
That’s where the CSS font-family property comes in. The CSS font-family property allows you to specify one or more font families which will be used to style the text on a web page.
This tutorial will discuss, with reference to examples, the basics of the CSS font-family property, and how you can use the property to style the text on a web page.
CSS Font Family
There are many aspects involved with styling a font in CSS, ranging from setting a color to the size of the font. One of the most important parts of styling a font, though, is to set the font family—the style used by text on a web page.
To set the font family used by text on a web page, you can use the font-family property. The syntax for the font-family property is as follows:
font-family: fontFamilyOne, fontFamilyTwo, …;
The font-family property accepts either a single font or a list of fonts. If you specify more than one fonts, you should separate each font with a comma.
The order in which fonts appear is the order in which the browser will try to apply the fonts. The browser will default to using the first font in the list that either is installed or can be downloaded by the web browser. If that font is not available, the second font will be used, and so on.
It’s important to note that the font-family property will select a font for each character in a block of text. So, if a particular character is not available in one font, the next font in your font family list will be tried, until a suitable font can be found.
When you’re using the font-weight property, it is best to include at least one generic font family name (such as serif, sans-serif, or monospace). This ensures that if another font in your list is not available, the browser will still be able to select a font for the text on a web page to appear.
There are two ways in which you can use the font-family property. First, you can use the property to specify a custom font for a web page. Second, you can use the property to apply a generic font family to text on a web page. The generic font families available for use with the font-family property are as follows:
- serif: Characters use the serif typeface (e.g. Lucida Bright, Palladio).
- sans-serif: Characters use the sans-serif typeface (e.g. Open Sans, Trebuchet MS).
- monospace: Characters all have the same width (e.g. monospace, Menlo).
- cursive: Characters have a joining stroke (e.g. Lucida Calligraphy).
- fantasy: Decorative fonts used to draw attention to characters (i.e. Papyrus).
There are other generic font families available, which you can read about in more depth in the Mozilla CSS font-family documentation.
Now that we know the basics of the font-family property, we can walk through a few examples of how it works in action.
CSS Font Family Examples
We have been asked by a local stamp club, The Seattle Stamp Club, to customize the fonts of certain parts on their website.
First, we have been asked to change the font of all <h1> headings on their “Contact” page to use the “Open Sans” font. So, for example, the “Contact Us” heading on the “Contact” page of their website should appear in Open Sans. If that font is not available, the generic “sans-serif” family should be used. We could use the following code to accomplish this task:
<html>
<h1>Contact Us</h1>
<style>
h1 {
font-family: "Open Sans", sans-serif;
}Click the 
button in the code editor above to see the output of our HTML/CSS code.
In our HTML code, we have specified a heading using a <h1> tag which contains the text Contact Us. Then, in our CSS code, we have used the font-family to define the font of the <h1> elements on our web page.
The value we assigned to the font-family property sets the font of all <h1> elements to Open Sans, and if that font is not available, the generic sans-serif family is used. To accomplish this, we specified two fonts, separated by a comma.
Now, suppose we also wanted to style all the <p> elements on the stamp club’s Contact page to use the Times font. If that font is not available, a default serif font should be used. We could use the following code to accomplish this task:
<html>
<p>Are you interested in learning more about the Seattle Stamp Club? Contact us today!</p>
<style>
p {
font-family: "Times", serif;
}Click the button in the code editor above to see the output of our HTML/CSS code.
In our example, we declared a paragraph of text using a <p> tag. Then, we set the font-family of all <p> tags in our CSS style sheet to use the Times and serif fonts. By default, the browser will try to render all <p> tags in the Times font. If this font is not available, the serif font is used.
Conclusion
The CSS font-family property allows you to specify the style of the text on a web page. For instance, you can use the font-family property to use the “Arial” font, or the “cursive” generic font for all text on a web page.
This tutorial discussed, with reference to examples, the basics of the CSS font-family property, and how you can use it to style the text on a web page. Now you’re ready to start using the font-family property like a master web designer!
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
