CSS: font-family

By Xah Lee. Date: . Last updated: .

font-family property lets you specify a font.

Font name is not case sensitive.


font-family: Arial, sans-serif;


font-family: Georgia, serif;


font-family: Courier, monospace;

Possible Values

Value can be a single value e.g.

font-family: Courier;

, or a sequence of values, like this

font-family: Courier, Menlo, monospace;


font-family: "andale mono", courier, menlo, monospace;

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

Generic Font Names

There are these special generic values:

Note, the choice of these can be set in browser preference by user.


This is Your Default serif Font

This is Your Default sans-serif Font

This is Your Default monospace Font

This is Your Default cursive Font

This is Your Default fantasy Font

This is Your system-ui Font

Here's how it looks in macOS.

css font family macOS 2018-11 a80a8
css font family macOS 2018-11

Serif vs Sans-Serif Font

Serif font example. ABC

Sans serif font example. ABC

Font Name

For font name, if the name contains space, it needs to be quoted. e.g.

font-family:"Times New Roman", serif;

Font Name is Not Case Sensitive

For font examples, see Standard Web Fonts

CSS Font

  1. font-family
  2. Standard Web Fonts
  3. Google Webfont
  4. font-size
  5. Meaning of Font Size
  6. Font Weight
  7. Chinese serif and sans-selif Font Names
Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Object Ref
  5. DOM Scripting
  6. SVG
  7. Blog