Learn

CSS Typography

Linking Fonts II

When we have the link to the font and the styles of our choice, we can add the font to the <head> section of the HTML document, using the <link> tag and the href property.

Let’s take a look at a few examples:

1. A single linked font, using Open Sans as an example:

<head>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans" rel="stylesheet">
</head>

2. Multiple linked fonts, using the Open Sans and Playfair Display fonts as an example:

<head>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Playfair+Display" rel="stylesheet">
</head>

3. Multiple linked fonts, along with weights and styles. Here Open Sans has font weights of 400, 700, and 700i, while Playfair Display has font weights of 400, 700, and 900i:

<head>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,900" rel="stylesheet">
</head>

Once a font is linked, we can create CSS selectors to target elements, just as we do with other fonts.

Instructions

In the previous exercise, you surfaced the link to the Space Mono font specifying both the normal (400) and bold (700) font weights.

In index.html include this font in the project using the <link> tag.

In style.css, in the “Font Card” section, create the selector .space .sample .text.

Using the selector you just created, set the font to "Space Mono" and add monospace as a fallback font.

Take this course for free

Or sign up using:

Already have an account?