Как подключить шрифт из Google Fonts

Короткий ответ

На сайте Google Fonts выберите шрифт и нужные начертания, нажмите Get embed code и вставьте выданный код в <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">

Затем укажите имя шрифта в CSS:

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

Строки preconnect заранее открывают соединение с серверами шрифтов, а display=swap показывает текст запасным шрифтом, пока файл грузится.

Почему здесь нет живого примера

Примеры на этом сайте не загружают ничего с чужих серверов, поэтому код ссылки показан как текст. Вот так выглядит текст на системных шрифтах — их не нужно скачивать, и они уже есть у каждого посетителя:

<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>

Разница с Google Fonts в том, что системный шрифт на Windows, macOS и Android свой, а подключённый выглядит везде одинаково — ценой лишнего запроса.

Шрифт на своём сервере

Каждый запрос к Google передаёт ему адрес посетителя, и в Европе это считают обработкой персональных данных. Надёжнее положить файлы шрифта на свой сайт и подключить их через @font-face, как в ответе про свой шрифт. Google Fonts отдаёт для скачивания файлы TTF — переведите их в woff2 конвертером или возьмите готовые woff2 в проекте Fontsource.

Частая ошибка

Писать в font-family только имя шрифта: font-family: "Roboto";. Если файл не загрузится, браузер покажет шрифт по умолчанию, обычно с засечками. Всегда добавляйте запасные шрифты и общее семейство в конце: sans-serif или serif.