CSS Fallback Fonts
CSS
In CSS, a fallback font is a backup font that is specified in the font-family property and used by the browser if the primary font is unavailable.
Fallback font
➔ This ensures that the text remains readable even if the specific font fails to install or load.
➔ List the fonts in the font-family from most specific to most generic, separated by commas..
➔ The last font in the font-family list should always be one of the generic font families (serif, sans-serif, monospace, cursive, fantasy).
➔ Font-family names containing spaces (e.g., "Times New Roman") must be wrapped in quotes.
Fallback font
p {
font-family: "Times New Roman", Times, serif;
}
In the above case.
1. The browser first tries to use the "Times New Roman" font.
2. If the "Times New Roman" font is not available, it tries Times.
3. If neither is available, it uses the browser's default serif font.
Common Fallback Font Stacks
| Generic Family | Example font-family Stack |
|---|---|
| Serif | p {font-family: Georgia, "Times New Roman", Times, serif;} |
| Sans-serif | p {font-family: Arial, Helvetica, sans-serif;} |
| Monospace | p {font-family: "Courier New", Courier, monospace;} |
| Cursive | p {font-family: "Brush Script MT", "Lucida Handwriting", cursive;} |
| Fantasy | p {font-family: Papyrus, fantasy;} |
Serif Family Common Fonts
| Font | Display |
|---|---|
| "Times New Roman" |
The five boxing wizards jump quickly.The quick brown fox jumps over the lazy dog. |
| Times |
The five boxing wizards jump quickly.The quick brown fox jumps over the lazy dog. |
| Georgia |
The five boxing wizards jump quickly.The quick brown fox jumps over the lazy dog. |
| Garamond |
The five boxing wizards jump quickly.The quick brown fox jumps over the lazy dog. |
| Serif |
The five boxing wizards jump quickly.The quick brown fox jumps over the lazy dog. |
p {
font-family: Georgia, Times, serif;
}
Sans-Serif Family Common Fonts
| Font | Display |
|---|---|
| Arial |
The five boxing wizards jump quickly.The quick brown fox jumps over the lazy dog. |
| Helvetica |
The five boxing wizards jump quickly.The quick brown fox jumps over the lazy dog. |
| Tahoma |
The five boxing wizards jump quickly.The quick brown fox jumps over the lazy dog. |
| Verdana |
The five boxing wizards jump quickly.The quick brown fox jumps over the lazy dog. |
| Geneva |
The five boxing wizards jump quickly.The quick brown fox jumps over the lazy dog. |
| "Trebuchet MS" |
The five boxing wizards jump quickly.The quick brown fox jumps over the lazy dog. |
| sans-serif |
The five boxing wizards jump quickly.The quick brown fox jumps over the lazy dog. |
p {
font-family: Arial, Verdana, Helvetica, sans-serif;
}
Monospace Family Common Fonts
| Font | Display |
|---|---|
| "Courier New" |
The five boxing wizards jump quickly.The quick brown fox jumps over the lazy dog. |
| Courier |
The five boxing wizards jump quickly.The quick brown fox jumps over the lazy dog. |
| monospace |
The five boxing wizards jump quickly.The quick brown fox jumps over the lazy dog. |
p {
font-family: "Courier New", Courier, monospace;
}
Cursive Family Common Fonts
| Font | Display |
|---|---|
| "Brush Script MT" |
The five boxing wizards jump quickly.The quick brown fox jumps over the lazy dog. |
| "Lucida Handwriting" |
The five boxing wizards jump quickly.The quick brown fox jumps over the lazy dog. |
| cursive |
The five boxing wizards jump quickly.The quick brown fox jumps over the lazy dog. |
p {
font-family: "Brush Script MT", "Lucida Handwriting", cursive;
}
Fantasy Family Common Fonts
| Font | Display |
|---|---|
| Papyrus |
The five boxing wizards jump quickly.The quick brown fox jumps over the lazy dog. |
| Copperplate |
The five boxing wizards jump quickly.The quick brown fox jumps over the lazy dog. |
| fantasy |
The five boxing wizards jump quickly.The quick brown fox jumps over the lazy dog. |
p {
font-family: Papyrus, fantasy;
}
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>CSS Fallback font example</title>
<style>
p {
font-family: "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<h3>CSS Fallback font example</h3>
<p><b>Note:</b> In CSS, a fallback font is a backup font that is specified in the font-family property and used by
the browser if the primary font is unavailable.</p>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.