Подключение веб-шрифтов производится с помощью CSS-правила @font-face.
@font-face {
font-family: "Roboto";
src:
local("Roboto Regular"),
url("/assets/fonts/roboto.woff") format("woff");
}
В этом правиле вы указываете название шрифта, которое будете использовать в font-family и источники, из которых браузер сможет загрузить шрифт. Обычно сначала указывают название шрифта в системе, чтобы браузер попытался найти его локально, а затем указывают адрес файла шрифта в интернете.
Можно хранить шрифты и подключать их со своего сервера. Это полезно, когда шрифт очень редкий и его нет ни в одном из шрифтовых сервисов. В этом случае берут файл шрифта (например, .ttf) и конвертируют в веб-формат в сервисе наподобие Font Squirrel (для кириллических шрифтов надо указать дополнительные параметры конвертации). Затем сконвертированные файлы шрифта размещают у себя на сервере и подключают шрифт с помощью @font-face.
Подключение нестандартных шрифтов. Часть первая
Подключение нестандартных шрифтов. Часть вторая