Как подключить шрифт на сайт

На fonts.google.com выберите шрифт, нужные начертания (обычный 400, жирный 700) и возьмите код для вставки. Он выглядит так — для шрифта Roboto:

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

Эти строки — в <head>, до вашего style.css. В CSS:

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

• wght@400;700 — подключаются только перечисленные начертания. Каждое лишнее — лишний файл для посетителя.
• display=swap — пока шрифт грузится, текст виден запасным шрифтом, а не пропадает.
• preconnect заранее открывает соединение с серверами шрифтов, чтобы шрифт пришёл быстрее.
• Arial, sans-serif после названия — запасные шрифты на случай, если Roboto не загрузится.

Положите файлы в папку сайта, например fonts/, и опишите каждое начертание в начале CSS-файла:

@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

• font-family в @font-face — имя, под которым шрифт будет доступен в CSS; у всех начертаний одно.
• font-weight связывает файл с насыщенностью: <strong> и font-weight: 700 возьмут жирный файл. Если описать только обычное начертание, браузер нарисует «жирный» сам, и выглядит это хуже.
• Путь в url() считается от CSS-файла, а не от страницы: из css/style.css до fonts/ — ../fonts/….

Формат. WOFF2 — сжатый формат для сайтов, его понимают все современные браузеры. Если есть только .ttf, подключите его так же с format("truetype"), но весит он заметно больше.

Свой файл не зависит от чужого сервера и не делает лишних запросов на другие сайты.