Embedded Files
Online font services, like Google Fonts, make it easy to find and link to fonts from your site. You can browse and select fonts that match the style of your website.
When you select a font in Google Fonts, you’ll be shown all of the different styles available for that particular font. You can then select the styles you want to use on your site.
When you’re done selecting a font and its styles, you can review your selected font family, and a <link> element will be automatically generated for you to use on your site!
<head>
<!-- Add the link element for Google Fonts along with other metadata -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
</head>
The generated <link> element needs to be added to the <head> element in your HTML document for it to be ready to be used in your CSS.
p {
font-family: 'Roboto', sans-serif;
}
You can then create font-family declarations in your CSS, just like how you learned to do with other fonts!
Instructions
Instructions
1.The font at the bottom of the page, under the Monospaced section, needs to be “Space Mono”. Let’s fix it by linking to the Space Mono Google Font!
Navigate to Google Fonts and select the “Space Mono” font. In the list of style variations, find “Regular 400” and click “+ Select this style”.
Copy the provided <link> element, and paste it into the <head> element inside index.html.
2. In style.css, inside the .space ruleset, create a declaration using the font-family property, with 'Space Mono', monospace; as the value.
Page updated
Report abuse