Fonts

Fonts

Fonts set the personality of your text!

font-family

Which typeface to use. List several, and the browser uses the first one it can find.

p {
  font-family: Verdana, Arial, sans-serif;
}

If Verdana is missing, try Arial, then ANY sans-serif. Generic family fallbacks:

• serif (with little feet), sans-serif (no feet), monospace (typewriter), cursive, fantasy.

font-size

How big the text is:

p {
  font-size: 20px;     /* fixed pixels */
  font-size: 1rem;     /* relative to the root font size */
  font-size: 1.2em;    /* relative to the PARENT size */
}

font-style and font-weight

p {
  font-style: italic;      /* or normal */
  font-weight: bold;       /* or normal, 100..900, bolder/lighter */
}

font-variant

p {
  font-variant: small-caps;   /* small caps text */
}

Google Fonts

Feet fonts from Google with one line:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Then use it:

p {
  font-family: "Roboto", sans-serif;
}

The shorthand

font: style variant weight size/line-height family.

p {
  font: italic bold 16px/1.5 Georgia, serif;
}

TL;DR

• font-family: list of fonts (first found wins).
• font-size: px, rem (relative to root), em (relative to parent).
• font-style, font-weight, font-variant.
• Use web fonts (Google Fonts) for variety.
• font: shorthand does it all.