How to use Google Fonts

Short answer

On the Google Fonts site pick a font and the weights you need, press Get embed code and paste the code you get into <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:wght@400;700&display=swap" rel="stylesheet">

Then use the font name in CSS:

body { font-family: "Roboto", system-ui, sans-serif; }

The preconnect lines open the connection to the font servers in advance, and display=swap shows the text in a fallback font while the file loads.

Why there is no live example here

The examples on this site load nothing from other servers, so the link code is shown as text. This is how text looks in system fonts — they need no download and every visitor already has them:

<style>
  .sys { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
  .serif { font-family: Georgia, "Times New Roman", serif; }
</style>
 
<p class="sys">System UI: The quick brown fox jumps over the lazy dog.</p>
<p class="serif">Serif: The quick brown fox jumps over the lazy dog.</p>

The difference from Google Fonts is that the system font differs on Windows, macOS and Android, while a connected font looks the same everywhere — at the cost of an extra request.

Hosting the font yourself

Every request to Google sends it the visitor's IP address, and in Europe that counts as processing personal data. It is safer to put the font files on your own site and connect them with @font-face, as in the answer about using a custom font. Google Fonts offers TTF files for download — convert them to woff2 or take ready woff2 files from the Fontsource project.

Common mistake

Writing only the font name in font-family: font-family: "Roboto";. If the file fails to load, the browser shows its default font, usually a serif one. Always add fallback fonts and a generic family at the end: sans-serif or serif.