Web Safe fonts, also known as “system fonts” or “browser fonts” are fonts that are commonly installed across most operating systems. There are two key advantages to using web safe fonts:
Speed
System fonts already exist on your visitors machine, so they don’t need to be downloaded by the browser before your text is rendered.
Consistency
By avoiding the use of fallback fonts, you ensure your typography is displayed consistently across devices.
What are Fallback Fonts?
Each operating system comes with its own collection of fonts, most of the time the fonts are not common across operating systems. For example macOS has included Lucida Grande since 1999, while it’s never been included with Windows or Linux.
Different versions of the same operating system can also support different fonts. Users of macOS from v10.11 El Capitan onwards will have access to San Francisco UI, users on older versions won’t.
When rendering web pages, the browser has contingencies for missing fonts, called fallbacks.
h1 {
font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, sans-serif;
}Browsers interpret the code from left-to-right. In the above code, if Lucida Grande isn’t available, the browser will try Lucida Sans Unicode next and keep moving right → until it finds one that is available.
In cases where no available fallback is defined in the CSS, the browser will use its own fallback font. For sans-serif font the browser fallback is usually Arial (Windows) or Helvetica (macOS). For serif fonts it’s Times (macOS) or Times New Roman (Windows).
Web Safe Fonts List
For the rest of this article we will be looking at fonts that are pre-installed with the latest versions of both Windows and macOS.
1. Arial
p {
font-family: Arial;
}The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
2. Comic Sans
p {
font-family: "Comic Sans MS";
}The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
3. Courier New
p {
font-family: "Courier New";
}The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
4. Georgia
p {
font-family: Georgia;
}The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
5. Impact
p {
font-family: Impact;
}The quick brown fox jumps over the lazy dog.
6. Palatino
p {
font-family: Palatino;
}The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
7. Tahoma
p {
font-family: Tahoma;
}The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
8. Times New Roman
p {
font-family: "Times New Roman";
}The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
9. Trebuchet
p {
font-family: "Trebuchet MS";
}The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
10. Verdana
p {
font-family: Verdana;
}The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.