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

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

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

Важное уточнение

Не все сайты работают одинаково. Поэтому некоторые методы не будут актуальны для решения вашей задачи. Это статья больше ориентирована на людей, которые сталкивались с HTML и CSS, а также имеют возможность редактировать файлы на своем сайте.

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

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

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

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

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

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

h1 {
  font-family: 'MyFont';
}

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

Помимо 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 */
}

Браузер сам выберет нужный ему шрифт. Список доступных форматов: «woff», «woff2», «truetype», «opentype», «embedded-opentype», и «svg».

Если вы хотите подключить несколько разных шрифтов, то можете несколько раз использовать @font-face.

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

Довольно часто нужный шрифт находится в популярной библиотеке Google Fonts.

Подключить шрифт с Google Fonts на сайт можно разными методами.

Например, вы можете сказать понравившийся шрифт и затем добавить его с помощью @font-face, о которой я рассказал вам выше.

Можно скачать шрифт с Google Fonts

Также есть еще варианты.

Находите нужный вам шрифт.

Выбираете нужное начертание (font-weight):

Выбираете нужное начертание

Затем, в правом верхнем углу нажимайте на иконку «View selected families»:

Нажимайте на иконку «Посмотреть выбранные шрифты»

У вас появится окно, где вы можете выбрать способ, как добавить шрифт на сайт: через link или @import. Link (выбрано по умолчанию) — вам достаточно копировать код и вставить внутри тега <head></head> (1 на изображении ниже). Далее, вы можете задавать элементам нужный шрифт с помощью CSS (2 на изображении ниже).

1 — вставляем в head, 2 — вставляем в CSS

Вариант с @import ничем не отличается, однако, если вы уберете <style></style> в коде, который предлагается скопировать, то можете вставлять @import прямо в главный css файл. Вариант с @import позволяет быть более гибким, однако, требует больше внимания.

Если вы прочитали статью, а шрифт все еще не подключается, то пишите в комментариях — мы рассмотрим ваш код вместе.

CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Статья была полезной?
👍
Да - 2
👎
Нет - 0
💬Комментарии:

CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Наш рейтинг
🏆Лучший хостинг для сайта
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение
Просмотров: 18271
Появление элементов при скролле
Просмотров: 16834
Перенос сайта на Тильде на свой хостинг. Пошаговое руководство
Просмотров: 8524
Как выровнять картинку по центру с помощью CSS
Просмотров: 6943
Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS
Просмотров: 6783
Проверка знаний
🤔Хорошо ли вы знаете 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