Технически подключение веб-шрифтов производится с помощью CSS-правила @font-face. Читается как «эт-правило font-face». Вот пример:

@font-face {
  font-family: "Roboto";
  src:
    local("Roboto Regular"),
    url("roboto.woff") format("woff");
}

В этом правиле вы указываете название шрифта, которое будете использовать в font-family и источники, из которых браузер сможет загрузить шрифт. Обычно сначала указывают название шрифта в системе, чтобы браузер попытался найти его локально на компьютере пользователя, а затем указывают адрес файла шрифта в интернете.

Более подробно о технических тонкостях подключения шрифтов можно прочитать в серии статей на fontstorage: первая часть и вторая часть.

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

1. Берут файл шрифта (например, .ttf) и конвертируют в веб-формат в сервисе наподобие Font Squirrel (для кириллических шрифтов надо указать дополнительные параметры конвертации).
2. Затем сконвертированные файлы шрифта размещают у себя на сервере.
3. И подключают шрифт с помощью @font-face.

Сейчас мы подключим шрифт, который расположен на сервере htmlacademy. Мы уже сконвертировали шрифт в веб-формат.