CSS: font-family

By Xah Lee. Date: . Last updated: .

font-family property lets you specify a font.

Example:

body { font-family: Arial, sans-serif; }
pre {font-family: Consolas, Menlo, monospace;}

Possible Values

Value can be a single value e.g.

font-family: Arial;

or a sequence of values, like this

font-family: Consolas, Menlo, monospace;

Browser will use the first one available on user's operating system.

Generic Font Names

There are these special generic values:

serif
a serif font browser uses as default.
sans-serif
a sans serif font browser uses as default.
monospace
a fixed-width font browser uses as default.
cursive
a cursive font browser uses as default.
fantasy
a fantasy font browser uses as default.
system-ui
user's operating system font.

Here's how it looks in macOS.

css generic font names macOS 2020-11-04 kYBQs
CSS generic font names on macOS 2020-11-04
css generic font names Windows 10 2021-07-21
CSS generic font names Windows 10 2021-07-21

Quote Font Name that Has Space

If font name contains space, it should be quoted. (no quote often works but may not if the font name start with a number or is a CSS keyword. )

h1 { font-family:'Times New Roman', serif; }

Font Name is Not Case Sensitive

For font examples, see Common Web Fonts

JS in Depth
XAH  BUY NOW

CSS

Basics

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc