What are Web Safe Fonts?
A font counts as web safe when almost all browsers and devices have it installed.
Fallback Fonts
No font is completely web safe, since any of them may go missing or be installed incorrectly. That is why fallback fonts should always be used.
In the font-family property, list similar backup fonts in order: when one does not work, the browser moves on to the next. A generic font family should always come last.
Example
Tahoma comes first here, backed up by Verdana and then a generic sans-serif.
<style> block, give a <p> font-family: Tahoma, Verdana, sans-serif, where the second and third are backups. Add a paragraph.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
font-family: Tahoma, Verdana, sans-serif;
}
</style>
</head>
<body>
<p>If Tahoma is not available, the browser falls back to Verdana, then to a generic sans-serif font.</p>
</body>
</html>
Web Safe Fonts for HTML and CSS
Several web safe fonts stand out for HTML and CSS. Among sans-serif fonts: Arial, Verdana, Tahoma and Trebuchet MS. Among serif fonts: Times New Roman, Georgia and Garamond. For monospace, Courier New, and for cursive, Brush Script MT.
Note: Test your fonts on different browsers and devices ahead of publishing, and never go without fallback fonts.
Arial (sans-serif)
No font is more widely used across online and printed media than Arial, which Google Docs also uses as its default. All major operating systems have it, making it one of the safest web fonts.
Example
Arial applied to sample text.
<style> block, set a <div> font-family to Arial, sans-serif. Inside, add a heading, a line of text, and the digits 0-9.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</div>
</body>
</html>
Verdana (sans-serif)
Even at small sizes, the very popular Verdana stays readable.
Example
Verdana applied to sample text.
<style> block, set a <div> font-family to Verdana, sans-serif. Inside, add a heading, a line of text, and the digits 0-9.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: Verdana, sans-serif;
}
</style>
</head>
<body>
<div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</div>
</body>
</html>
Tahoma (sans-serif)
Characters sit closer together in Tahoma, with less space between them.
Example
Tahoma applied to sample text.
<style> block, set a <div> font-family to Tahoma, sans-serif. Inside, add a heading, a line of text, and the digits 0-9.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: Tahoma, sans-serif;
}
</style>
</head>
<body>
<div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</div>
</body>
</html>
Trebuchet MS (sans-serif)
Microsoft designed Trebuchet MS in 1996. Not all mobile operating systems support it, so use it carefully.
Example
Trebuchet MS applied to sample text.
<style> block, set a <div> font-family to "Trebuchet MS", sans-serif. Inside, add a heading, a line of text, and the digits 0-9.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: "Trebuchet MS", sans-serif;
}
</style>
</head>
<body>
<div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</div>
</body>
</html>
Times New Roman (serif)
Few fonts in the world are as recognizable as Times New Roman. Its professional look has made it common in newspapers and on news sites, and it ships with Windows.
Example
Times New Roman applied to sample text.
<style> block, set a <div> font-family to "Times New Roman", serif. Inside, add a heading, a line of text, and the digits 0-9.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: "Times New Roman", serif;
}
</style>
</head>
<body>
<div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</div>
</body>
</html>
Georgia (serif)
Reading well at different sizes makes the elegant serif Georgia a good choice for mobile-responsive design.
Example
Georgia applied to sample text.
<style> block, set a <div> font-family to Georgia, serif. Inside, add a heading, a line of text, and the digits 0-9.
Output: complete HTML page
<!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>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</div>
</body>
</html>
Garamond (serif)
Many printed books are set in the classical Garamond, known for its timeless look and good readability.
Example
Garamond applied to sample text.
<style> block, set a <div> font-family to Garamond, serif. Inside, add a heading, a line of text, and the digits 0-9.
Output: complete HTML page
<!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>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</div>
</body>
</html>
Courier New (monospace)
Among monospace serif fonts, Courier New is the most widely used. You will often see it in code, many email providers default to it, and movie screenplays use it as their standard font.
Example
Courier New applied to sample text.
<style> block, set a <div> font-family to "Courier New", monospace. Inside, add a heading, a line of text, and the digits 0-9.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: "Courier New", monospace;
}
</style>
</head>
<body>
<div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</div>
</body>
</html>
Brush Script MT (cursive)
Handwriting was the model for Brush Script MT. Its elegance comes at a cost, since it can be hard to read, so use it carefully.
Example
Brush Script MT applied to sample text.
<style> block, set a <div> font-family to "Brush Script MT", cursive. Inside, add a heading, a line of text, and the digits 0-9.
Output: complete HTML page
<!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>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</div>
</body>
</html>