CSS: font-family

By Xah Lee. Date: . Last updated: .

font-family property lets you specify a font.

Font name is not case sensitive.

Example:

body
{
font-family: Arial, sans-serif;
}

Example:

h1
{
font-family: Georgia, serif;
}

Example:

pre
{
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;

Example:

pre
{
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.

Examples:

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.

h1
{
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? 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 Reference
  5. DOM
  6. SVG
  7. Web Dev Blog