Languages
[Edit]
EN

CSS - safe fonts

0 points
Created by:
sienko
323

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

Safe generic fonts

PreviewGeneric 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

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 nameGeneric 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 Newmonospace
Monacomonospace

Brush Script MT

cursive
Bradley Handcursive
Luminarifantasy

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.

References

  1. font-family - CSS: Cascading Style Sheets | MDN
  2. CSS Fonts - Generic font families
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join