Подключаем шрифты

Подключение веб-шрифтов производится с помощью 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.

Дополнительные материалы

Подключение нестандартных шрифтов. Часть первая

Подключение нестандартных шрифтов. Часть вторая

Google Fonts

Реклама