Как правильно добавить шрифты Google Web Fonts в WordPress тему

Шрифты Google Web — отличный источник шрифтов для веб-дизайнеров. В WPBv4 начали использовать популярное сочетание шрифтов Google Font: гарнитуры Oswald и Lora. Некоторые пользователи задавали вопросы относительно того, можно ли использовать шрифты от Google в темах для WordPress и о том, как это сделать. В этой статье речь пойдет о том, как добавлять шрифты Google Web Fonts в темы WordPress правильно и при этом не повлиять на быстродействие вашего сайта.

Ищем шрифты Google Web Fonts, которые вам нравятся

Сначала надо найти те шрифты от Google, которые вам нравятся. Поищите варианты среди предложенных в библиотеке шрифтов под названием Google fonts library. Как только найдете подходящий вариант, кликните на кнопку Quick-use:

После клика на данной кнопке вы окажетесь на новой странице. Прокрутите до тех пор, пока не увидите форму с названием "Add this code to your website":

Скопируйте код и вставьте его в блокнот, мы будем использовать его позже. Обычно используется как минимум 2 разных шрифта. К примеру, в нашей практике использовались шрифты Oswald + Lora. Так что описанную выше процедуру надо повторить и для второго шрифта.

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

Есть три основных способа добавления шрифтов от Google в ваш веб-сайт. К примеру, есть стандартный путь, способ импорта @import и добавление при помощи Javascript. Обычно используют один из двух первых методов.

Самый простой способ — это открыть файл вашей темы style.css и вставить в него следующий код, имеющий отношение к добавляемому шрифту (помните, мы скопировали его в блокнот на первом шаге):

@import url(https://fonts.bunny.net/css?family=Lora);
@import url(https://fonts.bunny.net/css?family=Oswald);

Так делают многие (StudioPress, Genesis). Но, тем не менее, это не совсем корректный метод добавления открытых шрифтов. Использование метода @import блокирует параллельное скачивание, в результате чего веб-браузер будет сначала до конца скачивать файл со шрифтами и только потом продолжит загружать остальной контент вашего веб-сайта. Поэтому, хотя такой способ кажется удобным, это не лучший способ для работы со шрифтом, если вам небезразлична скорость и производительность вашего сайта. Подробности о данных нюансах вы можете прочесть здесь.

Самым лучшим будет объединение запросов к разным шрифтам Google Fonts в один запрос, чтобы избежать избыточного числа HTTP-запросов. Вот как это сделать. Добавляем код:

@import url(https://fonts.bunny.net/css?family=Lora|Oswald);

Если даже вы вынуждены использовать @import, по крайней мере объедините множественные запросы в один.

Как добавить шрифты Google Web Fonts без ущерба для производительности сайта

Самым лучшим будет использование стандартного метода, с помощью которого используются ссылки, а не импорт файла. Просто возьмите два адреса URL из первого шага данной инструкции. Объедините 2 разных шрифта, добавив между ними символ | . Затем поместите полученный код в блок head вашей темы. Для этого вам придется отредактировать файл header.php и добавить в него код из таблицы стилей. Должно получиться что-то вроде следующего:

<link rel="stylesheet" type="text/css" href="https://fonts.bunny.net/css?family=Lora|Oswald" media="screen">
<link rel="stylesheet" type="text/css" href="YOUR THEME STYLESHEET" media="screen">

Основная цель — это добавить запрос к шрифту на ранней стадии. Согласно блогу проекта Google Web Fonts, если есть тег скрипта перед объявлением шрифта @font-face, тогда Internet Explorer ничего не будет рендерить на странице, пока не загрузится файл самого шрифта.

После выполнения данного шага можете просто использовать полученный фрагмент кода и шрифт в файле CSS вашей темы. Выглядеть это будет примерно так:

h1 {
    font-family: 'Oswald', Helvetica, Arial, serif;
}

Есть немало дочерних тем и фреймворков. Не рекомендуется изменять файлы родительской темы, особенно, если вы используете фреймворк; потому что изменения в теме будут стерты каждый раз, как вы обновляете версию фреймворка. Вам придется поработать над надстройками и фильтрами в родительской теме или ее фреймворке, если хотите добавить корректно шрифты от Google в дочерние темы.

К примеру, если посмотреть на страницу Blueprint, команда создала тему WPBv4 как кастомную дочернюю тему от фрейморка Genesis. Давайте посмотрим, как добавлять шрифты Google Web в дочернюю тему на основе Genesis.

Как добавить шрифты Google Web Fonts в дочернюю тему на базе Genesis

Откройте дочернюю тему и ее файл functions.php и добавьте в этот файл следующий код:

add_action( 'genesis_meta', 'wpb_add_google_fonts', 5);

function wpb_add_google_fonts() {
		echo '<link rel="stylesheet" type="text/css" href="https://fonts.bunny.net/css?family=Lora|Oswald" media="screen">';
}

Не забудьте заменить ссылку на шрифт ссылкой на тот шрифт, который выбрали вы.

Основное, что надо сделать — это посмотреть на код внутри блока genesis_meta. По умолчанию там заданы параметры наподобие META-описаний, ключевых слов, таблицы стилей, фавиконов и т.д. Указав приоритет 5, мы убедимся, что таблица стилей будет подгружаться до того, как загрузится основная таблица стилей.

К сожалению, мы не можем осветить все существующие родительские и фреймворки, которые есть. Если у вас возникли вопросы по конкретным темам, задавайте их разработчикам и авторам тем в соответствующих ветках форумов для разработчиков тем.

Наша последняя подсказка касательно Google Web Fonts на вашем сайте: не задавайте вопросов и не экспериментируйте с теми шрифтами, которые не собираетесь использовать. К примеру, если вам нужен только нормальный и жирный шрифт, не используйте и не настраивайте все остальные возможные стили для конкретного шрифта. Надеемся, что наш пост поможет вам правильно настроить и использовать шрифты Google Web Fonts на вашем WordPress-сайте.

Источник: WPBeginner.com

Алексей Шевченко

редактор wpcafe

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующийся на создании сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/