Добавляем в свою тему WordPress шрифты от Google Fonts

Сейчас рассмотрим самый распространённый способ добавления кастомных шрифтов в любую тему WordPress.

Добавляем шрифты из ресурса Google Fonts.

Бесплатный ресурс Google fonts позволяет добавлять любые доступные шрифты соответствующие своему дизайну.
Сразу идём на Google Fonts и приступаем к выбору необходимого шрифта. Первым делом в фильтрах отбора нужно выставить параметры Categories и Languages. В фильтре Languages выставляем поддержку Cyrillic, а фильтр Categories отвечает за начертание шрифтов. Например найден подходящий шрифт «Roboto Condensed», жмём на кнопку SELECT THIS FONT и появляется финальное окно настройки и вывода данного шрифта.
В появившемся окне в закладке CUSTOMIZE выбираем необходимые параметры вывода, а в закладке EMBED смотрим готовые коды для вставки выбранного шрифта в свою тему.
При выборе в закладке EMBED режимов light 300, regular 400, bold 700, Cyrillic, Cyrillic Extended, Latin получаем следующий результат (вставляем его в файл HEADER.php своей темы внутри тега HEAD):

1
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700&amp;subset=latin,cyrillic,cyrillic-ext" rel="stylesheet">

В таблице стилей (style.css) своей темы подключенный шрифт используется следующим образом:

1
font-family: "Roboto Condensed", sans-serif;

Или более расширенно примерно так (вариаций много):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
h3, h4, h5 {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #FAC700;
}
.text {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 300;
  color: #666;
}
#indefinite {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 21px;
  font-weight: 400;
}

На этом процесс подключения шрифта в свою тему с ресурса Google Fonts можно считать успешно законченным.
Конечно, есть ещё море способов и вариантов включения кастомных шрифтов в темы WordPress но, этот вариант выдаёт вполне себе надёжный и рабочий результат.

Пробуйте, удачи вам!

2 комментариев на “Добавляем в свою тему WordPress шрифты от Google Fonts

  1. DAC 30.05.2019 13:50

    Благодарю! Оказывается всё просто. Вариант работает.

Оставить комментарий в DAC Отменить Реплику

Ваш электронный адрес не будет опубликован.

Вы можете использовать эти HTML теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>