Commonly Used Font Fallbacks
Below are some commonly used font fallback stacks, grouped by the five generic font families: serif, sans-serif, monospace, cursive, and fantasy.
Serif Fonts
Common serif fallback stacks.
Times New Roman, Times, serif
Starts with Times New Roman and falls back to Times, then a generic serif.
Prompt
An HTML page that shows a serif font fallback stack.
In an internal
<style> block, set a <div> font-family to "Times New Roman", Times, serif. Inside, add a heading and a paragraph.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>
</body>
</html>
Georgia, serif
Starts with Georgia and falls back to a generic serif.
Prompt
An HTML page that shows a Georgia serif fallback stack.
In an internal
<style> block, set a <div> font-family to Georgia, serif. Inside, add a heading and a paragraph.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: Georgia, serif;
}
</style>
</head>
<body>
<div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>
</body>
</html>
Garamond, serif
Starts with Garamond and falls back to a generic serif.
Prompt
An HTML page that shows a Garamond serif fallback stack.
In an internal
<style> block, set a <div> font-family to Garamond, serif. Inside, add a heading and a paragraph.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: Garamond, serif;
}
</style>
</head>
<body>
<div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>
</body>
</html>
Sans-Serif Fonts
Common sans-serif fallback stacks.
Arial, Helvetica, sans-serif
Starts with Arial and falls back to Helvetica, then a generic sans-serif.
Prompt
An HTML page that shows an Arial sans-serif fallback stack.
In an internal
<style> block, set a <div> font-family to Arial, Helvetica, sans-serif. Inside, add a heading and a paragraph.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>
</body>
</html>
Tahoma, Verdana, sans-serif
Starts with Tahoma and falls back to Verdana, then a generic sans-serif.
Prompt
An HTML page that shows a Tahoma sans-serif fallback stack.
In an internal
<style> block, set a <div> font-family to Tahoma, Verdana, sans-serif. Inside, add a heading and a paragraph.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: Tahoma, Verdana, sans-serif;
}
</style>
</head>
<body>
<div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>
</body>
</html>
Trebuchet MS, Helvetica, sans-serif
Starts with Trebuchet MS and falls back to Helvetica, then a generic sans-serif.
Prompt
An HTML page that shows a Trebuchet MS sans-serif fallback stack.
In an internal
<style> block, set a <div> font-family to "Trebuchet MS", Helvetica, sans-serif. Inside, add a heading and a paragraph.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
</style>
</head>
<body>
<div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>
</body>
</html>
Geneva, Verdana, sans-serif
Starts with Geneva and falls back to Verdana, then a generic sans-serif.
Prompt
An HTML page that shows a Geneva sans-serif fallback stack.
In an internal
<style> block, set a <div> font-family to Geneva, Verdana, sans-serif. Inside, add a heading and a paragraph.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>
</body>
</html>
Monospace Fonts
A common monospace fallback stack.
Courier New, Courier, monospace
Starts with Courier New and falls back to Courier, then a generic monospace.
Prompt
An HTML page that shows a Courier New monospace fallback stack.
In an internal
<style> block, set a <div> font-family to "Courier New", Courier, monospace. Inside, add a heading and a paragraph.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: "Courier New", Courier, monospace;
}
</style>
</head>
<body>
<div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>
</body>
</html>
Cursive Fonts
A common cursive fallback stack.
Brush Script MT, cursive
Starts with Brush Script MT and falls back to a generic cursive.
Prompt
An HTML page that shows a Brush Script MT cursive fallback stack.
In an internal
<style> block, set a <div> font-family to "Brush Script MT", cursive. Inside, add a heading and a paragraph.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: "Brush Script MT", cursive;
}
</style>
</head>
<body>
<div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>
</body>
</html>
Fantasy Fonts
A common fantasy fallback stack.
Copperplate, Papyrus, fantasy
Starts with Copperplate and falls back to Papyrus, then a generic fantasy font.
Prompt
An HTML page that shows a Copperplate fantasy fallback stack.
In an internal
<style> block, set a <div> font-family to Copperplate, Papyrus, fantasy. Inside, add a heading and a paragraph.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: Copperplate, Papyrus, fantasy;
}
</style>
</head>
<body>
<div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>
</body>
</html>