Как подключить шрифт к сайту html +css

Содержание

Одна из первых задач, которая встает перед вебмастером при создании нового проекта - как подключить шрифт к сайту. С помощью html и css шрифт можно подключить как напрямую с хостинга, так и удаленно при помощи различных сервисов типа гугл-шрифтов (GoogleFonts). Так же есть много других ресурсов, которые помогут быстро подобрать шрифты для вашего сайта:

Fonts-online - хранилище шрифтов, доступных для скачивания.
Canva.com - удобный сервис для подбора шрифтовых пар.
GoogleFonts - сервис от google с возможностью интеграции шрифтов на сайт через API.
Fontstorage - русскоязычный сервис, аналогичный по функционалу GoogleFonts. Можно скачивать шрифты или подключать напрямую к сайту через API.

Как подключить шрифт с помощью GoogleFonts

1Переходим на GoogleFonts (https://fonts.google.com/), выбираем нужный, после чего откроется такое окно (рис.1):

Нажимаем на кнопку "select this style" (выделена красным), после чего справа появится всплывающее окно (рис. 2):

Если окно не появилось, то нажимаем на пиктограмму из трех квадратов и плюса (подчеркнута красным).

2Выбираем вкладку Embed (подчеркнута красным) и копируем код для вставки на сайт (подсв. синим) (рис.3)

3После того, как код скопирован, вставляем его в хедер вашего сайта между тегами <head></head>.

Или переключаемся на вкладку @import (чуть правее) и копируем код из этого же окошка, но его вставляем в файл style.css вашего сайта.

После подключения шрифта, в css - файле у нужного элемента прописывается следующее свойство ( на примере заголовка h1):

h1 {
font-family: 'Open Sans', sans-serif
}

Не рекомендуется подключать большое количество google-шрифтов одновременно, т. к. это негативно отразится на скорости загрузки сайта.

Как подключить шрифт к сайту прямой ссылкой в хедере

1 Через сервис Fonts-online или GoogleFonts скачиваем шрифт, далее загружаем его через файловый менеджер хостинга в папку fonts вашего сайта. Если у вас такой папки нет, то ее необходимо создать.

2После того, как папка создана и шрифт загружен, необходимо прописать путь к нему в хедере вашего сайта (на примере wordpress) между тегами <head></head> .

В WordPress эта строчка вносится в файл header.php.

Некоторые браузеры не поддерживают определенные форматы шрифтов. Поэтому, если вы все сделали правильно, но шрифт не подключается, то попробуйте переконвертировать его в формат otf , woff или svg через любой онлайн - сервис для конвертации.

Проверить поддержку шрифтов браузером можно через этот сервис. Для этого необходимо ввести в поисковую строку формат шрифта (otf например).

Чтобы шрифт корректно отображали все браузеры, рекомендуется одновременно подключать несколько форматов (otf, svg, woff).

Как подключить шрифт через файл стилей css

1 Этот способ более предпочтителен и отличается от предыдущего только тем, что шрифт подключается не через хедер, а через css. Для этого в файле style.css вашего сайта прописывается такой код:

@font-face{
font-family: 'open sans';
src: local('opensans.otf'), /*проверяем наличие шрифта на компьютере пользователя*/
url('../путь-до-папки/fonts/opensans.otf'); /*путь до папки со шрифтом*/
}

При подключении шрифта к сайту через css всегда следует использовать конструкцию src: local('название шрифта'), т.к. она проверяет наличие шрифта в системе пользователя. Если он будет найден, то тогда загрузка внешних шрифтов производиться не будет.

Подключение шрифта через css - самый практичный вариант из всех вышеперечисленных, т. к. здесь можно задать жирность шрифта, стиль и другие свойства. Например:

@font-face{
font-family: 'open sans';
src:local('opensans.otf'),
url('fonts/opensans.otf');
font-weight: 400; /*задаем жирность шрифта*/
font-style: normal; /*задаем стиль*/
}

2Для подключения сразу нескольких форматов шрифтов, необходимо в css файл добавить такой код:

@font-face {
font-family: 'open sans';
src: local('opensans.otf'),
url('fonts/open sans.woff2') format('woff2'),
url('fonts/open sans.woff') format('woff'),
url('fonts/open sans.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}