Одна из первых задач, которая встает перед вебмастером при создании нового проекта - подбор и подключение необходимых шрифтов к сайту. Шрифт можно подключить как с помощью html и css, так и с помощью различных сервисов, например, GoogleFonts. Так же есть различные ресурсы, которые помогут быстро подобрать шрифты для вашего сайта:
- https://www.fonts-online.ru/ - хранилище шрифтов, доступных для скачивания.
- https://www.canva.com/font-combinations/ - удобный сервис для подбора шрифтовых пар.
- https://fonts.google.com/ - сервис от google с возможностью интеграции шрифтов на сайт через API.
Непосредственно подключить шрифты на сайт можно тремя способами:
1Используя сервис GoogleFonts (https://fonts.google.com/)
Переходим на сервис, выбираем нужный шрифт, после чего откроется такое окно (рис.1):
Нажимаем на кнопку "select this style" (выделена красным), после чего справа появится всплывающее окно (рис. 2):
Если окно не появилось, то нажимаем на пиктограмму из трех квадратов и плюса (подчеркнута красным).
Выбираем вкладку Embed (подчеркнута красным) и копируем код для вставки на сайт (подсв. синим) (рис.3)
После того, как код скопирован, вставляем его в хедер вашего сайта между тегами <head></head>.
Или переключаемся на вкладку @import (чуть правее) и копируем код из этого же окошка, но его вставляем в файл style.css вашего сайта.
После того, как шрифт подключен, в css - файле у нужного элемента прописывается следующее свойство ( на примере заголовка h1):
2 Через сервис https://www.fonts-online.ru/ или GoogleFonts скачиваем шрифт на сайт, далее загружаем его через файловый менеджер хостинга в папку fonts вашего сайта. Если у вас такой папки нет, то ее необходимо создать. После того, как папка создана и шрифт загружен, необходимо прописать путь к нему в хедере вашего сайта (на примере wordpress) между тегами <head></head> .
В WordPress эта строчка вносится в файл header.php.
Некоторые браузеры не поддерживают определенные форматы шрифтов. Поэтому, если вы все сделали правильно, но шрифт не подключается, то попробуйте переконвертировать его в формат otf , woff или svg через любой онлайн - сервис для конвертации.
Проверить поддержку шрифтов браузером можно через этот сервис. Для этого необходимо ввести в поисковую строку формат шрифта (otf например).
Чтобы шрифт корректно отображали все браузеры, рекомендуется одновременно подключать несколько форматов (otf, svg, woff).
3 Этот способ более предпочтителен и отличается от предыдущего только тем, что шрифт подключается не через хедер, а через css. Для этого в файле style.css вашего сайта прописывается такой код:
font-family: 'open sans';
src: url('fonts/opensans.otf');}
Следует обратить внимание, что этот код будет работать, если файл стилей и папка со шрифтом расположены на одном уровне. Если папка со шрифтом находится в другом месте, то тогда следует использовать такую конструкцию:
font-family: 'open sans';
src: url('../путь-до-папки/fonts/opensans.otf');}
font-family: 'open sans';
src: url('fonts/opensans.otf');
font-weight: 400; /*задаем жирность шрифта*/
font-style: normal; /*задаем стиль*/
}
