Generic Fonts

There are 5 generic categories of fonts: serif, sans-serif, monospace, cursive and fantasy. In general, you should try to use a sans-serif font for body text, serif or sans-serif for headings, and monospace for imitating typewriter or computer code. Try to avoid cursive and fantasy because they are hard to read.

.some-element {
	font-family: sans-serif;
}

The default sans-serif font is usually Helvetica (Mac and iOS) or Arial (Windows). The default serif font is usually Times or Times New Roman. The default monospace font is usually Courier or Courier New. Except on Android, which has its own "Droid" family of fonts (Droid Sans, Droid Serif, and Droid Sans Mono).

System Fonts

You can also choose to use other fonts installed on the user's system -- however this can be tricky because different systems have different fonts installed! To work around this problem, you can declare several different fonts for the same style.

.some-element {
  font-family: Calibri, Geneva, Tahoma, sans-serif;
}

The above code tells the browser to use Calibri if it's available, otherwise use Geneva if it's available, otherwise use Tahoma if it's available, otherwise fall back to the generic sans-serif font (Arial on Windows, Helvetica on Mac/iOS, Droid Sans on Android).

Here are some well-researched "font stacks" that should cover most situations:

Important: If a font name has spaces in it, you must put quotation marks around it!

.some-element {
  font-family: 'Trebuchet MS', sans-serif;
}

Note that you should always list one of the generic font category names (sans-serif or serif) at the end of your font-family to serve as a fallback in case none of your chosen fonts are available.

For reference, here is the "lowest common denominator" list of sans-serif fonts that you can safely assume are installed on all Mac, Windows, and iOS systems:

And here are the serif fonts that are installed on all Mac, Windows, and iOS systems:

Pretty short lists, eh? It gets even shorter if you include Android, because Android doesn't have any of those fonts installed by default -- instead it uses the "Droid" family (Droid Sans, Droid Serif, and Droid Sans Mono). Which means the list of fonts that are universally available across all systems is a big whopping zero. So then how do we actually use different fonts on web pages?

Web Fonts

Web fonts allow you to choose typefaces and send their font files to the browser along with your web page, so people can use them even if they're not installed on their system. Web fonts are somewhat complicated, but the simplest way to utilize them is via Google Fonts:

  1. Go to https://www.google.com/fonts
  2. Browse through the listing and choose the font(s) you wish to use by clicking the blue "Add to Collection" button.

    Note: Don't choose too many, because the more you use the longer it will take for your page to load! In general, try to stick to just 1 (for headings) or 2 (one for headings, one for body text).

  3. Click the grey "Use" button at the bottom-right of the screen.
  4. Choose your desired weights and styles for each font:
    • For your heading font, choose either "Normal 400" or "Bold 700".
    • For body text, choose these four:
      • "Normal 400"
      • "Normal 400 Italic"
      • "Bold 700"
      • "Bold 700 Italic"
    • Important: Try to keep the "Page Load" meter on the right side of the screen in the green or yellow. If you're unable to keep it down, try choosing different fonts instead. Or maybe you can just choose one web font for your headings, and then settle for one of the system fonts (Helvetica/Arial, Trebuchet MS, or Verdana) for your body text.
  5. Scroll down the page to step 3 ("Add this code to your website"), make sure the "Standard" tab is chosen, then copy the line of code in the box (e.g. <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'>).
  6. Paste that code into the <head> of your HTML file.
  7. Now you can utilize the chosen font(s) in your CSS.
    h1, h2, h3, h4 {
    	font-family: 'Roboto Condensed', sans-serif;
    }

    Remember to put quotes around the font name if it has spaces in it, and remember to always use the fallback generic font name afterwards (e.g. sans-serif or serif).