Шрифты 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(http://fonts.googleapis.com/css?family=Lora);
@import url(http://fonts.googleapis.com/css?family=Oswald);

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

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

@import url(http://fonts.googleapis.com/css?family=Lora|Oswald);

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

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

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

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/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="http://fonts.googleapis.com/css?family=Lora|Oswald" media="screen">';
}

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

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

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

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

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

Вам понравился материал?

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

12 комментариев

сначала новые
по рейтингу сначала новые по хронологии
Denis Creative

Спасибо, полезная информация, как раз искал - что лучше @import или link для шрифтов. Раньше все время подключал через импорт якобы, чтобы код чище был, а оказывается это влияет на скорость, будем исправлять.

А вот, допустим, шрифты загружены в тему через @import. Каким образом сделать так, чтобы выбранным шрифтом нормально отображался русский текст, при условии, что сам шрифт cyrillic И cyrillic ext поддерживает?

Гульнара

А как добавить шрифты в редактор FCK editor?

не работает почему то. Все делаю по примеру но шрифты не действуют

самого популярного шрифта Myriad Pro неету(

Валентина Павлова

есть аналог Myriad Pro - PT Sans Narrow

Железный Феликс

Еще проще: скачиваем с гугла ttf и через фонтсквирелл делаем набор для разных браузеров.

Oksana Kutsenko

А можно подробнее? Сделала, и как теперь адаптировать их для сайта на WordPress&

Эти два шрифта поддерживают кириллицу?

Шрифты, о которых идет речь в уроке, не поддерживают кириллицу.

Для кого тогда этот урок?

На этапе выбора шрифтов в Google fonts library можно отфильтровать только кириллические шрифты (поставить чекбокс) и выбрать тот, который вам нравится.