CSS Fallback Fonts
Commonly Used Fallback Fonts
There are no 100% completely web safe fonts. There is always a chance that a font is not found or is not installed properly. Therefore, it is very important to always use fallback fonts.
This means that you should add a list of similar "backup fonts" in the font-family property. If the first font does not work, the browser will try the next one, and the next one, and so on. Always end the list with a generic font family name.
Below are some commonly used fallback fonts, organized by the 5 generic font families:
- Serif
- Sans-serif
- Monospace
- Cursive
- Fantasy
Serif Fonts
| font-family | Example text | Code |
|---|---|---|
| "Times New Roman", Times, serif | This is a HeadingThis is a paragraph. |
Try it |
| Georgia, serif | This is a HeadingThis is a paragraph. |
Try it |
| Garamond, serif | This is a HeadingThis is a paragraph. |
Try it |
Sans-Serif Fonts
| font-family | Example text | Code |
|---|---|---|
| Arial, Helvetica, sans-serif | This is a HeadingThis is a paragraph. |
Try it |
| Tahoma, Verdana, sans-serif | This is a HeadingThis is a paragraph. |
Try it |
| "Trebuchet MS", Helvetica, sans-serif | This is a HeadingThis is a paragraph. |
Try it |
| Geneva, Verdana, sans-serif | This is a HeadingThis is a paragraph. |
Try it |
Monospace Fonts
| font-family | Example text | Code |
|---|---|---|
| "Courier New", Courier, monospace | This is a HeadingThis is a paragraph. |
Try it |
Cursive Fonts
| font-family | Example text | Code |
|---|---|---|
| "Brush Script MT", cursive | This is a HeadingThis is a paragraph. |
Try it |
Fantasy Fonts
| font-family | Example text | Code |
|---|---|---|
| Copperplate, Papyrus, fantasy | This is a HeadingThis is a paragraph. |
Try it |
Tip: Also check out all available Google Fonts and how to use them.
