[Edit]

CSS - safe fonts

1 contributors

2 contributions

0 discussions

0 points

Created by:

sienko

743

In this article, we would like to show you safe font families in CSS.

Safe generic fonts

Edit

Preview	Generic family name
	`font-family: serif;`
	`font-family: sans-serif;`
	`font-family: monospace;`
	`font-family: cursive;`
	`font-family: fantasy;`
	`font-family: system-ui;`
-	`font-family: ui-serif;`
-	`font-family: ui-sans-serif;`
-	`font-family: ui-monospace;`
-	`font-family: ui-rounded;`
-	`font-family: emoji;`
-	`font-family: math;`
-	`font-family: fangsong;`

Popular fonts

Edit

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

Edit

Generic font family name:

xxxxxxxxxx
 
<!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>

Auto running

Popular fonts:

xxxxxxxxxx
 
<!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>
​

Auto running

Fonts stack:

xxxxxxxxxx
 
<!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>

Auto running

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.