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