There are other ways to link non-user fonts that don’t require the use of the <link> tag in the HTML document. CSS offers a way to import fonts directly into stylesheets with the @font-face property.
To load fonts with the @font-face property:
- Instead of using the font’s link in the HTML document, enter the link into the URL bar in the browser.
- The browser will load the CSS rules. You will need to focus on the rules that are directly labeled as
/* latin */. Some of the latin rules are on separate lines. You will need each of these. - Copy each of the CSS rules labeled latin, and paste the rules from the browser to the top of style.css.
It is important to stress the need to copy the @font-face rules to the top of the stylesheet for the font to load correctly in the project.
Instructions
1. View the video in this exercise.
The video demonstrates how to enter the Space Mono font link you previously retrieved into the browser. The browser in turn displays the rules you will use for the font.
2. Once you have viewed the video, repeat these steps in the browser on your desktop computer, with link for the Space Mono font with normal (400) and bold (700) font-weights. You can find the direct link to the font here.
Once your desktop browser displays the rules, click ‘Next’ to continue.