If you've ever worked in a word-processing program, you've likely changed your document's font at some point. The list of fonts you can choose from depends on what font files are available on your computer. This probably gives you a ton of options! In contrast, the list of compatible system fonts for the web can be quite limited. But why?
This is because a staggering number of people are accessing webpages every day, and there's no way to know what fonts they have available on their computers. If you have a font on your computer that you really like, and you set your website's text to that font, it'll display just fine for you. But every single person who doesn't have that font installed will see whatever their browser decides to use in its place. This can ruin the design you had in mind.
Using common fonts installed on most operating systems by default is a pretty safe bet. But just for further insurance, you can also set fallback options with your font choices. This means that if the first option you've chosen isn't available on the user's system, it will then attempt the next option. If none of your specified fonts will work for a user, it's ideal to have a “generic” category at the end of your list. That way you can make sure to indicate the general style of font you want the browser to choose. You can include as many options as you like—just fill out the value with each font name, separating the names with a comma.
Here is an example of how to implement the font-family property to change the font used by an individual element.
<p style="font-family:Times,serif;">A Serif Font</p>
A Serif Font |
If desired, you will want to pick a specific, web-safe font by name and then follow it up with the font category your preferred font belongs to in the event your choice it's available. The browser will use the order of fonts in your tag as a prioritized list. It will try your first option and your fallbacks sequentially until it finds a compatible font for the browser.
The generic categories you use as fallbacks will mainly fall into the following groups: serif, sans-serif, monospace, and cursive. See the table below for an explanation of each.
Font Category | Description | Example Fonts |
---|---|---|
Serif | Serif includes fonts that have decorative marks or flourishes on the ends of the characters, giving them a more sophisticated and classic feel. These fonts are traditionally used in printed materials for their readability in that format. However, serif fonts can be difficult to read in a digital space. | Times New Roman Georgia Garamond |
|
||
Sans-Serif | Sans-serif means "without serif," so these fonts do not have embellishments and are generally simpler in appearance. Sans-serif fonts look more modern and work well in digital and print materials. | Arial Verdana Segoe UI |
|
||
Monospace | Monospace fonts use the same width for every character and give a less natural, more "computerized" feel. These fonts are great for headings or accent text. | Courier New Andale Mono |
|
||
Cursive | Cursive encompasses fonts that are handwritten in appearance. These fonts should be used with care because they can appear too casual or may be difficult to read in large blocks. | Brush Script Comic Sans |
|
||
Fantasy | Fantasy fonts are decorative or intense. They are ideal for larger text like headlines or short titles, but they can be difficult to read in longer text. Support for fonts in this category is fairly low. |
Impact Haettenschweiler |
|
Using your own text editor or the coding space below, try adding a font-family to several text elements and see what they do. Does the readability change if you increase or decrease the font size? Are some fonts more legible for larger bodies of text vs. headings? These are some questions you should ask when setting a font-family to your page.