CSS Fonts

Fonts are controlled in CSS through many properties. The three we will focus on are - font-family, font-weight, andfont-size.

font-family

Because different computers have different fonts available to them, the font-family property allows both for a list of fonts to use and a generic font class, like serif, sans-serif, or monospace. The browser will look for each font in order until it finds one available. When you list these fonts, they should be separated by commas and all multi-word font names should be in quotes. Here's an example:

font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

font-weight

The two values we use most often with font-weight are normal and bold. You can also use a number between 1 and 1000, with larger numbers being bolder, but your font has to support the number you choose. It's safer to stick with normal and bold.

font-size

If you've dealt with fonts in print, you may have heard terms like "12 point" type. We don't use points in CSS, however. We use measurements called pixels (px), relative ems (rem), or percentages. We'll look at what each measurement means on the next page.