Как подключить шрифт к сайту с помощью CSS и не только
Шрифты — одна из базовых вещей, которые используются при разработке сайта. Наряду с картинками, файлами 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, о которой я рассказал вам выше.
Также есть еще варианты.
Находите нужный вам шрифт.
Выбираете нужное начертание (font-weight):
Затем, в правом верхнем углу нажимайте на иконку «View selected families»:
У вас появится окно, где вы можете выбрать способ, как добавить шрифт на сайт: через link или @import. Link (выбрано по умолчанию) — вам достаточно копировать код и вставить внутри тега <head></head> (1 на изображении ниже). Далее, вы можете задавать элементам нужный шрифт с помощью CSS (2 на изображении ниже).
Вариант с @import ничем не отличается, однако, если вы уберете <style></style> в коде, который предлагается скопировать, то можете вставлять @import прямо в главный css файл. Вариант с @import позволяет быть более гибким, однако, требует больше внимания.
Если вы прочитали статью, а шрифт все еще не подключается, то пишите в комментариях — мы рассмотрим ваш код вместе.
