CSS - safe fonts
In this article, we would like to show you safe font families in CSS.
Safe generic fonts
| Preview | Generic family name |
|---|---|
|
| font-family: serif; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| - |
|
| - |
|
| - |
|
| - |
|
| - |
|
| - |
|
| - |
|
Popular fonts
This group of fonts is guaranteed by the specific operating systems on which the browser is installed. They may look different depending on your operating system.
Note:
Go to the next section to see how to use multiple fonts to automatically match one of the available fonts.
| Family name | Generic family name |
|---|---|
|
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 |
| Monaco | monospace |
|
Brush Script MT | cursive |
| Bradley Hand | cursive |
| Luminari | fantasy |
Practical examples
Generic font family name:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
font-size: 30px;
}
</style>
</head>
<body>
<div style="font-family: serif ">example text...</div>
<div style="font-family: sans-serif ">example text...</div>
<div style="font-family: monospace ">example text...</div>
<div style="font-family: cursive ">example text...</div>
<div style="font-family: fantasy ">example text...</div>
<div style="font-family: system-ui ">example text...</div>
<div style="font-family: ui-serif ">example text...</div>
<div style="font-family: ui-sans-serif">example text...</div>
<div style="font-family: ui-monospace ">example text...</div>
<div style="font-family: ui-rounded ">example text...</div>
<div style="font-family: emoji ">example text...</div>
<div style="font-family: math ">example text...</div>
<div style="font-family: fangsong ">example text...</div>
</body>
</html>
Popular fonts:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
font-size: 30px;
}
</style>
</head>
<body>
<div style="font-family: Arial ">example text...</div>
<div style="font-family: Verdana ">example text...</div>
<div style="font-family: Helvetica ">example text...</div>
<div style="font-family: Tahoma ">example text...</div>
<div style="font-family: Trebuchet MS ">example text...</div>
<div style="font-family: Times New Roman ">example text...</div>
<div style="font-family: Georgia ">example text...</div>
<div style="font-family: Garamond ">example text...</div>
<div style="font-family: Courier New ">example text...</div>
<div style="font-family: Monaco ">example text...</div>
<div style="font-family: Brush Script MT ">example text...</div>
<div style="font-family: Bradley Hand ">example text...</div>
<div style="font-family: Luminari ">example text...</div>
</body>
</html>
Fonts stack:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.custom-font {
font-family: "Arial", "Verdana", sans-serif; /* uses first supported font */
}
</style>
</head>
<body style="font-size: 30px">
<div>example text... (default font)</div>
<div class="custom-font">example text... (custom font)</div>
</body>
</html>
Note:
It is a good practice to always include at least one generic family name in a font-family list, since there's no guarantee that any specified font is available.
External fonts
It is possible with HTML5 to load some external fonts such as Google Fonts or Font Awesome.