CSS, Fonts, and Google Fonts

To set the font face to use for text in some element, you use the font-family CSS property, like so:

p {
    font-family: "Roboto";
}

You can specify multiple fonts, e.g. font-family: "Roboto", sans-serif;. Certain special font names, such as sans-serif and monospace, may vary between browsers but are always available.

The font-family property can only use fonts that your browser is aware of. This means that only fonts already installed on the user's computer, or loaded on the page, will actually appear when specified through this property. If a specified font isn't found, the browser will fall back to the next font you have specified, or to the default font. If you want to use an uncommon font on your site, you will need to load it in using CSS.

There are special CSS rules that are used to tell the browser how to load a new font from the internet, so that it can be used in the font-familyfont-family property. This is done through a @font-face block, in which you specify the name of the font and any URLs through which it can be obtained:

@font-face {
    font-family: "My Font Name";
    src: url(https://website.com/myfont.woff);
}

After specifying such a @font-face rule, you can safely use this font:

p {
    font-family: "My Font Name";
}

Hosting your own web fonts and writing @font-face rules can be a chore. Because of this, services like Google Fonts exist, allowing you to freely choose fonts to include in your site. When choosing from the font galleries on such a site, you will be given a neat little <link> tag to include in your page's header - this will include a stylesheet that sets up the fonts you desire for you to freely use throughout your page.

For example, if I wanted to use Roboto from Google Fonts, I might navigate to google fonts and click on Roboto.

I would then choose which font styles I want to use. I only want normal, bold, and italic, so I will click + Select this style next to those styles.

I would choose the Embed tab in the sidebar that then appears on the screen, and copy the <link> tag provided:

I would add the copied tag to my <head> section:

<head>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap" rel="stylesheet">
</head>

And finally, I can use the font in my code!

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