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
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
Playfair Display has font weights of
Once a font is linked, we can create CSS selectors to target elements, just as we do with other fonts.
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
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.