CSS Tutorial
On this page:
- Defining font face using CSS
- Font families
- Font-family property values
- Web-safe font families
- Font-family rule quotes
If you do not specify a font face for a web page, your visitors will view the page using the default setting on their own computer.
The previous page showed you how to set up CSS rules for your web pages. The rule to set a Times New Roman font face for your entire page using the body selector looks like:
body {
font-family: "Times New Roman";
}
If you have Times New Roman font installed on your computer, the web page will display as you expect when you test it.
If you specify a font face in your web page, and it is not available on your visitor's computer, your web page will be displayed in the default font on a visitor's computer.
Your web page will probably be viewed using Macs or PCs with a Mac OS, Windows or Linux operating system. Each of these will most likely have different fonts installed. Some of the fonts on your computer will not be available on some of your visitors' computers.
Four major font categories are used on web pages:
- sans-serif
- cursive
- monospace
- serif
CSS uses the font-family property to list corresponding fonts on different computers. A CSS rule to display Times New Roman font or its closest equivalent on other computers would be:
body {
font-family: "Times New Roman", Times, serif;
}
The above rule is interpreted by visitors' computers as:
- If the Times New Roman font is installed on this computer, display the web page using Times New Roman font.
- If the Times New Roman font is not installed on this computer, and Times font is installed on this computer, display the web page using Times font.
- If neither Times New Roman nor Times fonts are installed on this computer, use the computer's default serif font to display the web page.
Your web page could therefore look distinctly different on different computers.
It is very unlikely that any font can be found on all computers. Some fonts are more common than others. Commonly-available fonts with links to previews on various computers are listed here.
You can compose your own lists of fonts to display using the font-family property. The first font in the list will be used if possible. Successive fonts on the list are tried until a listed font is available.You can use our interactive tutorial to see how many of the commonly-used fonts appear on a web page
If a font name consists of only one word, you do not need to enclose the name in quotes. However, if a font name has more than one word, you should enclose the name in double quotes, like (for example):
body {
font-family: "Arial Black", Gadjet, sans-serif;
}