Set a prioritized list of font family names and/or generic font family names for the text of an element.
Syntax
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.
Examples:
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. |
(CSS1) Browser Support: All major browsers
“A man cannot leave a better legacy to the world than a well-educated family” ~ Thomas Scott
Related:
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.