Программное обеспечение, Web технологии и Интернет
  •  Email RSS
  • RSS
  • Facebook
  • Twitter

Как правильно добавить шрифты 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(http://fonts.googleapis.com/css?family=Lora);
@import url(http://fonts.googleapis.com/css?family=Oswald);

Так делают многие (StudioPress, Genesis). Но, тем не менее, это не совсем корректный метод добавления открытых шрифтов. Использование метода @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-сайте.

Подписаться на рассылку RSS !   Подписаться на рассылку RSS по Email !

Категории: Web, WordPress

Файлообменник без регистрации

Несведущие люди могут думать о том, что Интернет — это [...]

Как заработать деньги на форуме?

Сейчас можно легко заработать на форуме. Этот метод заработка доступен [...]

"Киевстар" рассказал об успехах

  Украинскому оператору связи «Киевстар» по итогам II квартала удалось [...]

Twitter снова купил рекламный стартап

Руководство Twitter завершило сделку по приобретению рекламного стартапа, который носит [...]

Системы электронных платежей

Существует очень большое количество сервисов, которые помогают перевести средства через [...]

Яндекс прощается с рейтингом блогов

Поиск по блогам Яндекса прекратил поддержание рейтинга блогеров и блогхостингов, [...]

Бразильский интернет станет безопаснее

Парламент Бразилии внес законопроект о безопасности интернета, работу над которым [...]

Баннерная реклама в Интернете

В интернете существует множество видов рекламы, одним из этих видов [...]