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

🗓️ Обновлено: 02.09.2021
💬Комментариев: 0
👁️Просмотров: 256
web

Шрифты — одна из базовых вещей, которые используются при разработке сайта. Наряду с картинками, файлами 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

Статья была полезной?
👍
Да - 1
👎
Нет - 0
💬 Комментарии:

CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Вступай в клуб
🧑‍💻Присоединяйся к сообществу!
Patreon
Наш рейтинг
🏆Лучший хостинг для сайта
9/10
8/10
8/10
4
8/10
Где учиться
🧑‍🎓Рекомендуемые курсы
Javascript-разработчик
Введение в программирование
SEO-специалист
Проверка знаний
🤔Хорошо ли вы знаете CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Very Peri
🤔Цвет 2022 года
Институт цвета Pantone объявил цвет 2022 года. Это сиреневый оттенок под названием 17-3938 Very Peri.
#6667ab