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.