Skillbox

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

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

Непосредственно интегрировать шрифты на сайт можно тремя способами:

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

Рис. 1 Googlefonts

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

Подключить шрифт googlefonts
Рис 2.

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

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

Рис.3

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

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

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

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


2.  Через сервис https://www.fonts-online.ru/  или  GoogleFonts скачиваем шрифт на сайт, далее загружаем его через файловый менеджер хостинга в папку fonts вашего сайта. Если у вас такой папки нет, то ее необходимо создать. После того, как папка создана и шрифт загружен, необходимо прописать путь к нему в хедере вашего сайта между тегами  <head></head> .

<link href="https://ваш-сайт.ру/wp-content/themes/ваша-тема/fonts/opensans.ttf" rel="stylesheet">

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

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

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

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

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

@font-face{
font-family: 'open sans';
src: url('fonts/opensans.otf');}

Следует обратить внимание, что этот код будет работать, если файл стилей и папка со шрифтом расположены на одном уровне. Если папка со шрифтом находится в другом месте, то тогда следует использовать такую конструкцию:

@font-face{
font-family: 'open sans';
src: url('../путь-до-папки/fonts/opensans.otf');}

Добавить комментарий

Ваш e-mail не будет опубликован.