Importing Web Fonts

We can find web fonts for free on websites like Google Fonts, where you can choose a font, select the font weights you want to import, and then choose how you want to import the font into your web page. There are two options available.

Importing the font using the link HTML element or using the @import CSS rule. Importing with the link element is the standard, so we will use this method.

The font import using the link element can look like this:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

You simply copy and paste this into the head element as follows:

<head>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>

Now we can use the font in CSS. The only difference is that we need to enclose the font name in quotation marks. If we imported the Roboto font, using this font would look like this:

* {
	font-family: "Roboto", sans-serif;
}

Note the use of quotation marks and the fallback font sans-serif that would be used if Roboto couldn't be loaded.

Instructions

Import the Inter font into the head element using the following link elements:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet">

Be careful not to delete the existing link element in the head.

Change the font family of all elements (*) to "Inter", sans-serif;.

Start programming for free

8/9