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

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

Опишите шрифт через @font-face и используйте его имя в font-family:

@font-face {
  font-family: "Brand";
  src: url("/fonts/brand.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
 
body { font-family: "Brand", system-ui, sans-serif; }

Файл лежит на вашем сервере. Формат woff2 сжат лучше всех и поддерживается всеми браузерами — другие форматы сегодня не нужны.

Начертания

Для жирного и курсива — отдельные файлы и отдельные правила @font-face с тем же именем, но другим font-weight или font-style. Если файла нет, браузер нарисует жирный сам, и выглядит это хуже.

Сервис шрифтов

Можно подключить шрифт ссылкой в head, которую выдаёт сервис шрифтов, например Google Fonts. Сервис сам создаёт правила @font-face, а вы указываете имя шрифта в font-family. Свои файлы надёжнее: нет запросов к чужому серверу.

Пока шрифт грузится

font-display: swap сначала показывает текст запасным шрифтом, а потом подменяет его. Без этого текст может быть невидимым несколько секунд.

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

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