Web-safe fonts are a standard in web design. By choosing a web-safe font, you can be sure that your text will always appear as intended.
Before you will make your website live, always check how your fonts appear on different browsers and devices (and always use fallback fonts).
The list of web-safe fonts for HTML and CSS:
- Arial (sans-serif)
- Verdana (sans-serif)
- Helvetica (sans-serif)
- Tahoma (sans-serif)
- Trebuchet MS (sans-serif)
- Times New Roman (serif)
- Georgia (serif)
- Garamond (serif)
- Courier New (monospace)
- Brush Script MT (cursive)
Demo:
Arial (sans-serif)
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<p>This is a paragraph, shown in the Arial font.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>Output:
This is a paragraph, shown in the Arial font.
0 1 2 3 4 5 6 7 8 9
Verdana (sans-serif)
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: Verdana, sans-serif;
}
</style>
</head>
<body>
<p>This is a paragraph, shown in the Verdana font.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>Output:
This is a paragraph, shown in the Verdana font.
0 1 2 3 4 5 6 7 8 9
Helvetica (sans-serif)
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: Helvetica, sans-serif;
}
</style>
</head>
<body>
<p>This is a paragraph, shown in the Helvetica font.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>Output:
This is a paragraph, shown in the Helvetica font.
0 1 2 3 4 5 6 7 8 9
Tahoma (sans-serif)
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: Tahoma, sans-serif;
}
</style>
</head>
<body>
<p>This is a paragraph, shown in the Tahoma font.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>Output:
This is a paragraph, shown in the Tahoma font.
0 1 2 3 4 5 6 7 8 9
Trebuchet MS (sans-serif)
Note: Not supported by all mobile operating systems.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<p>This is a paragraph, shown in the 'Trebuchet MS' font.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>Output:
This is a paragraph, shown in the ‘Trebuchet MS’ font.
0 1 2 3 4 5 6 7 8 9
Times New Roman (serif)
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: 'Times New Roman', serif;
}
</style>
</head>
<body>
<p>This is a paragraph, shown in the 'Times New Roman' font.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>Output:
This is a paragraph, shown in the ‘Times New Roman’ font.
0 1 2 3 4 5 6 7 8 9
Georgia (serif)
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: Georgia, serif;
}
</style>
</head>
<body>
<p>This is a paragraph, shown in the Georgia font.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>Output:
This is a paragraph, shown in the Georgia font.
0 1 2 3 4 5 6 7 8 9
Garamond (serif)
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: Garamond, serif;
}
</style>
</head>
<body>
<p>This is a paragraph, shown in the Garamond font.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>Output:
This is a paragraph, shown in the Garamond font.
0 1 2 3 4 5 6 7 8 9
Courier New (monospace)
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: 'Courier New', monospace;
}
</style>
</head>
<body>
<p>This is a paragraph, shown in the 'Courier New' font.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>Output:
This is a paragraph, shown in the ‘Courier New’ font.
0 1 2 3 4 5 6 7 8 9
Brush Script MT (cursive)
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: 'Brush Script MT', cursive;
}
</style>
</head>
<body>
<p>This is a paragraph, shown in the 'Brush Script MT' font.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>Output:
This is a paragraph, shown in the ‘Brush Script MT’ font.
0 1 2 3 4 5 6 7 8 9
Enjoy coding!
Read also: