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.

Google Fonts Roboto Styles Page

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.

Showing Selected Font Families

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:[email protected]&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!



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.


In style.css, inside the .space ruleset, create a declaration using the font-family property, with 'Space Mono', monospace; as the value.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?