CSSclasses · Learning materials

Font-family

The font-family CSS property allows for a prioritized list of font family names and/or generic family names to be specified for the selected element. Unlike most other CSS properties, values are separated by a comma to indicate that they are alternatives. The browser will select the first font on the list that is installed on the computer, or that can be downloaded.

You should always add at least one generic family in a font-family list, since there’s no guarantee that a specific font is installed on the computer or can be downloaded.

Dark Light

body {
  font-family: Proxima-Nova, Helvetica, sans-serif;
}

Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means that punctuation characters and digits at the start of each token must be escaped in unquoted font family names.

Here a few examples how it’s done right:

Dark Light

body {
  font-family: Times, "Times New Roman", Georgia, serif;
}

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

p {
  font-family: cursive;
}

Keep going with our example let’s add a font-family to the div we’ve created before.

Dark Light

<head>
<!-- ... -->
  <style>
    div {
      color: white;
      background-color: green;
      width: 300px;
      height: 200px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <div>I’m a div</div>
</body>

If you hit refresh (CMD + R) again, your font-family should have changed from the default serif to sans-serif. Now that wasn’t so hard, was it?

Font-Size

The font-size property allows you to set a font size for the text in your Element. There are different ways to set font-sizes that can get a little tricky, so let us only use the most simple technique for now (you should really revisit this topic later). We will assign fixed pixel values to our elements:

Dark Light

<head>
<!-- ... -->
  <style>
    html {
      font-size: 10px;
    }
    h1 {
      font-size: 32px;
    }
    div {
      color: white;
      background-color: green;
      width: 300px;
      height: 200px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>I am a big heading</h1>
  <div>I am a div</div>
</body>

First you can see we set the font-size for everything inside of the html element to a small 10px (by default modern browsers set 16px). All the elements on the inside will inherit this value, if they don’t have a different rule for their font size. As you can see, the h1 has a value of 32px assigned, so the browser shows us a big heading while the div has the small text size without having any font-size property declared.