Loading...

The default typeface isn't always right for the job. The font-family property gives you the option to select a specific font or a font category for an element.

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?

student working on a web project

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 
<p style="font-family: 'Times New Roman', serif;">Times New Roman</p>
<p style="font-family: Georgia, serif;">Georgia</p>
<p style="font-family: Garamond, serif;">Garamond</p>
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 
<p style="font-family: Arial, sans-serif;">Arial</p>
<p style="font-family: Verdana, sans-serif;">Verdana</p>
<p style="font-family: 'Segoe UI', Verdana, sans-serif;">Segoe UI</p>
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 
<p style="font-family: 'Courier New', monospace;">Courier New</p>
<p style="font-family: monospace;">Andale Mono</p>
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 
<p style="font-family: 'Brush Script MT', cursive;">Brush Script</p>
<p style="font-family: cursive;">Comic Sans</p>
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 
<p style="font-family: Impact, fantasy;">Impact</p>
<p style="font-family: Haettenschweiler, fantasy;">Haettenschweiler</p>
Lesson Content Banner

You Try!

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.