TL;DR — Web safe fonts are fonts that work on the majority of operating systems. To ensure the best browser compatibility, you should learn to font stack: create lists of fonts in the order of preference.
Contents
What web safe fonts are
Web safe fonts refer to fonts installed into most of the operating systems. Therefore, there is a higher chance for web safe fonts to be presented equally to all users. CSS calls such fonts as generic font families.
However, since CSS3, developers can use web fonts for their websites. Web fonts allow you to set custom fonts to be downloaded with your web page. As a result, there are more options for styling texts.
Creating font stack
The CSS font stack refers to a list of fonts defined in the font-family declaration. Every font in the list is a fallback in situations when fonts cannot load.
Therefore, the CSS font stacks help you control the way your page looks in cases when the main font (first in the list) does not work on users' devices.
Here is an example of a CSS font list:
p {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}Note: the CSS fonts lists should end with the generic name.
The following sections explain the five generic font families.
Serif fonts
| font-family | Text Example |
|---|---|
| Georgia, serif | Example Heading
Example paragraph |
| "Palatino Linotype", "Book Antiqua", Palatino, serif | Example Heading
Example paragraph |
| "Times New Roman", Times, serif |
Example Heading Example paragraph |
Sans-serif fonts
| font-family | Text Example |
|---|---|
| Arial, Helvetica, sans-serif |
Example Heading Example paragraph |
| "Arial Black", Gadget, sans-serif |
Example Heading Example paragraph |
| "Comic Sans MS", cursive, sans-serif |
Example Heading Example paragraph |
| Impact, Charcoal, sans-serif |
Example Heading Example paragraph |
| "Lucida Sans Unicode", "Lucida Grande", sans-serif |
Example Heading Example paragraph |
| Tahoma, Geneva, sans-serif |
Example Heading Example paragraph |
| "Trebuchet MS", Helvetica, sans-serif |
Example Heading Example paragraph |
| Verdana, Geneva, sans-serif |
Example Heading Example paragraph |
Cursive fonts
| font-family | Example text |
|---|---|
| "Comic Sans MS", Comic Sans, cursive |
Example Heading Example paragraph |
| Apple Chancery, cursive |
Example Heading Example paragraph |
| Bradley Hand, cursive |
Example Heading Example paragraph |
| Brush Script MT, Brush Script Std, cursive |
Example Heading Example paragraph |
| Snell Roundhand, cursive |
Example Heading Example paragraph |
| URW Chancery L, cursive |
Example Heading Example paragraph |
| cursive |
Example Heading Example paragraph |
Fantasy fonts
| font-family | Example text |
|---|---|
| Impact, fantasy |
Example Heading Example paragraph |
| Luminari, fantasy |
Example Heading Example paragraph |
| Chalkduster, fantasy |
Example Heading Example paragraph |
| Jazz LET, fantasy |
Example Heading Example paragraph |
| Blippo, fantasy |
Example Heading Example paragraph |
| Stencil Std, fantasy |
Example Heading Example paragraph |
| Marker Felt, fantasy |
Example Heading Example paragraph |
| Trattatello, fantasy |
Example Heading Example paragraph |
| fantasy |
Example Heading Example paragraph |
Monospace fonts
| font-family | Example text |
|---|---|
| "Courier New", Courier, monospace |
Example Heading Example paragraph |
| "Lucida Console", Monaco, monospace |
Example Heading Example paragraph |
| FreeMono, monospace |
Example Heading Example paragraph |
| OCR A Std, monospace |
Example Heading Example paragraph |