Как добавить свой шрифт в WordPress?

Вопрос

Как наиболее удобным способом загружать свои шрифты в WordPress. Утомляет все время прописывать путь и писать код чтобы его подключить. Может быть есть какой-то плагин?

Ответ

Для подключения своих шрифтов в WordPress, как и в других системах управления контентом, есть два основных способа:

  1. Подключение через CSS;
  2. Регистрация шрифта с помощью API.

Забегая вперед, отметим, что добавление шрифтов с помощью плагинов мы считаем избыточным.

1. Добавление шрифта в CSS с помощью @font-face

  • Загрузите исходные файлы шрифтов на сервер:
    • Наилучшим расположением кастомных шрифтов будет являться директория вашей темы оформления WordPress (/wp-content/themes/my-theme/fonts/).
  • Подключите шрифт в основной таблице стилей вашей темы:
    • Пример добавление шрифта Open Sans в CSS:
      @font-face {
       font-family: "Open Sans";
       src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
            url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
      }
    • Если вы используете Google Fonts, воспользуйтесь правилом @import:
    • @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap&subset=cyrillic');

2. Подключение шрифта через wp_enqueue_style()

Ссылка из Google Fonts представляет собой таблицу стилей с правилами @font-face. Поэтому мы с легкостью можем зарегистрировать ее с помощью WordPress API.

Для этого достаточно разместить код в functions.php вашей темы оформления:

function google_fonts() {
    wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap&subset=cyrillic', false );
}

add_action( 'wp_enqueue_scripts', 'google_fonts' );