Font Compatibility
font-family is a CSS property that allows you to list multiple fonts in order of preference. The browser will try to find the first listed font first, only falling back to each next font if the previous one was not found. In general, a wider category called a “font family” is listed at the end, so that if no other fonts are available, an appropriate generic installed font will be used.
There are an incredibly wide number of fonts on the internet, but not every font is available on every browser and opertating system (OS). Many fonts are far more common on Windows than Mac, or vice versa. ChromeOS, in particular, has an extremely limited selection of fonts. Because of this, though a webpage may look a certain way on your own local machine, it may look quite different on another computer, depending on the default fonts available. This has an especially large effect on the “cursive” and “fantasy” font families.
To help mitigate this problem, we’ve created a reference list of some of the most common fonts, organized by font-family and OS. When choosing fonts to use for the font-family property, we recommend picking at least one font that is common to Macs and one that is common to Windows. (They may be the same font, if it happens to work well on both.) This way, you will tend to have more control over the look of your page, rather than leaving it up to the OS to pick what font to substitute. In a later lesson we will learn about embedding fonts, which will greatly increase which fonts you can reliably use. But until then, we hope this reference guide will prove useful.