CSS Fonts

I. Font family

To change the font, we use the font-family property.

  • If the name of a font family is more than one word, it must be in quotation marks, such as: “Times New Roman”.
  • More than one font family is specified in a comma-separated list
h2 {
  font-family: Garamond, sans-serif;
}

In the code above, sans-serif is a fall-back font if Garamond is unavailable.

II. Google Fonts

Google Fonts offers thousands of open-source fonts for free use.

We can link a single font or multiple fonts with the font-weight and font-style properties.

To use Google Fonts, we need to link it in the <head> section of the HTML.

<head>
  <link rel="stylesheet" href="styles.css" />
  <link
    href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap"
    rel="stylesheet"
  />
</head>

and use it in CSS:

h2 {
  font-family: "Playfair Display", serif;
}

III. Font weight

We can style bold text in CSS with the font-weight property. If we want to ensure that the text is not bold, we can set the font-weight to normal.

p {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

The font-weight property can also be assigned a number value to style text on a numeric scale ranging from 100 to 900. Values are multiples of 100.

  • 400 is the default font-weight of most text.
  • 700 signifies a bold font-weight.
  • 300 signifies a light font-weight.

IV. Font style

font-style property is mostly used to specify italic text. It also has a normal value which is the default.

p {
  font-style: italic;
}

V. Word spacing

We use word-spacing to increase the spacing between words in the text. The default amount of space between words is usually 0.25em.

p {
  word-spacing: 0.05em;
}

VI. Letter spacing

To increase the spacing between individual letters, we use letter-spacing property in CSS.

h2 {
  letter-spacing: 0.2em;
}

VII. Line height

To modify line height, we use line-height property. Line heights can take one of several values:

  • A unitless number, such as 1.2. This number is an absolute value that will compute the line height as the font size ratio.
  • A number specified by unit, such as 12px. This number can be any valid CSS unit, such as pixels, percents, ems, or rems.
p {
  letter-spacing: 10px;
}