Web Fonts

So far, we have used fonts that are installed on almost every computer, such as Arial, Verdana, Georgia, Times New Roman or Courier New. They are sometimes called web-safe fonts. You can rely on them, but there are only a few of them, and lots of websites use them.

A web font is downloaded from the internet together with the page, so every visitor sees it, even if it isn't installed on their device. You can find thousands of free web fonts at Google Fonts. There you choose a font and the weights you want, and the site gives you a piece of HTML to paste into the head element of your page. For the Inter font in weights 400, 700 and 900, it looks 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=Inter:wght@400;700;900&display=swap" rel="stylesheet">

• The first two lines (preconnect) tell the browser to connect to Google's servers right away, so that the font downloads sooner. The page would work without them, only a little slower. The crossorigin attribute is needed because of the special way browsers download fonts; just copy it.
• The third line links a stylesheet, just like the link to our style.css, but this stylesheet is stored on Google's server and tells the browser where to download the font files from. family=Inter:wght@400;700;900 means the Inter font in weights 400, 700 and 900, and display=swap means that until the font arrives, the text is shown in a fallback font.

Then we use the font in CSS:

body {
	font-family: Inter, Arial, sans-serif;
}

We keep the other fonts in the list as fallbacks, in case the web font can't be downloaded. The name Inter has no spaces, so it doesn't need quotes, but "Inter" works too. Write a name with spaces, such as Open Sans, in quotes: "Open Sans".

A web font has only the weights we download. We asked for 400, 700 and 900, so we can finally make the main heading extra bold.