Как подключить шрифт к сайту — используем разные методы

Шрифты — одна из базовых вещей, которые используются при разработке сайта. Наряду с картинками, файлами css, js шрифты незаменимый элемент современного сайта. Поэтому часто у верстальщиков возникает вопрос — как подключить шрифт к сайту? И как это можно сделать с помощью css. Давайте разберемся с различными вариантами подключения шрифта к html странице.

Подключение с помощью CSS через @font-face

В CSS есть такое правило font-face, которое позволяет подключить нужный шрифт к сайту.

Пример подключения шрифта через font-face:

@font-face {
  font-family: 'MyFont';
  src: url(../fonts/MyFont.ttf') format('truetype');
  font-display: swap;
}

Давайте разберем синтаксис. Что мы только что сделали построчно.

font-family — задали название нашего шрифта. Затем, когда мы захотим, например, задать всем h1 этот шрифт, достаточно в CSS прописать следующее:

h1 {
  font-family: 'MyFont';
}

Далее src. С помощью этого свойства мы указываем путь к нашему шрифту. В нашем конкретном случае файл MyFont.ttf находится в папке fonts, которая на один уровень выше от нашего css файла, в котором и выполняется данный код.

Помимо src есть еще свойство local. Мы можем сказать браузеру, чтобы он искал на локальном компьютере пользователя определенный шрифт. Это может сократить время загрузки страницы, если у пользователя будет на компьютере установлен текущий шрифт.

Кстати, мы можем задать сразу несколько форматов одного и того же шрифта (для лучшей поддержки в различных браузерах):

@font-face {
  font-family: 'MyFont';
  src: url('webfont.eot'); /* Поддерживается в IE9 */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Для супер современных браузеров */
       url('webfont.woff') format('woff'), /* Для супер современных браузеров */
       url('webfont.ttf')  format('truetype'), /* Для Сафари, Андроид, iOS и почти всех других */
       url('webfont.svg#svgFontName') format('svg'); /* Для iOS */
}

Подключение шрифта с помощью @import

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