Set a prioritized list of font family names and/or generic font family names for the text of an element.

      font-family: font1,font2,font3...,GenericFont ;
      font-family: inherit ;

The user agent/browser will display the text using the first font in the list which is available. To guarantee that at least one of the fonts will be available, a generic family name should be added as the last value in the list. (A generic font will automatically select a suitable installed font.)

Generic family names:

cursive  A cursive script font, an example of cursive script.
fantasy  A special, decorative font (CSS2.1+) an example of fantasy.
monospace  A monospaced font, an example of monospace.
system-ui  A system font, an example of system-ui.
sans-serif  A font without serifs (like Arial) an example of sans-serif.
serif  A font with serifs (like Times) an example of serif.

inherit Inherit from the parent element.
-apple-system Display the system font, Apple Safari only

If a font name includes spaces then surround the "full name" with quotes. From the CSS 2.1 spec: To avoid mistakes in escaping, it is recommended to quote font family names that contain white space, digits, or punctuation characters other than hyphens. Generic font-families, such as monospace should not be quoted.

Family names, being CSS keywords, are always case insensitive. Font family names can be case sensitive on some early operating systems, the CSS 3 specification requires that font-names be treated case-insensitively.

A font stack for system-ui with backward compatibility for older browsers:
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

The on screen appearance of a font can also be affected by OS font smoothing and ClearType.

h1 { font-family: Helvetica,Verdana,sans-serif ;}
#emw3id { font-family: "Courier New", monospace;
.emw3class { font-family: Palatino, "Palatino Linotype", Georgia, Times, serif; }

Try it:

The 'Try It' control will change the appearance of this text.

A greater difference in legibility can be found within members of the same type family than between a serif and a sans-serif typeface. Factors such as x-height, counter size, letter spacing and stroke width will affect readability.

Possibly ambiguous characters:

(CSS1) Browser Support: All major browsers

“A man cannot leave a better legacy to the world than a well-educated family” ~ Thomas Scott


Font Stacks - CSS Tricks.
Common fonts - for all versions of Windows & OS X
font-size - Font size of text.
font-style - Font style for text.
font-variant - Whether or not text should be displayed in a small-caps font.
font-weight - Normal, bold, bolder.
font - Shorthand to set the font properties above in one declaration.

Copyright © 2013-2022
Some rights reserved