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 Font 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 computer.

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 is 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

CSS

Basics

Selectors

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc