CSS: font-family

By Xah Lee. Date: .

font-family property lets you specify a font.

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

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