Как использовать шрифты Google Fonts в WordPress

Google предоставляет возможность использовать нестандартные шрифты на сайтах и веб-приложениях, в копилке этого сервиса уже более 600 первоклассных шрифтов и их начертаний! Естественно, Гугль позаботился об инструкции по подключению этих шрифтов, однако она достаточно общая, и не имея достаточного опыта в разработке сайтов на WordPress можно подключить шрифт неверно или не подключить вообще =)

Прежде всего, существует множество плагинов, позволяющих легко интегрировать Google Fonts в WordPress и уже в настройках плагина выбирать все, что требуется. Вы легко найдете эти плагины через обычны поиск по запросу “Google Fonts”. Однако, для более продвинутых разработчиков, кто не привык по каждому поводу искать и ставить плагины, есть более универсальный способ, правда требующий редактирования кода темы.

Прежде всего, выберите нужны вам шрифт в Google Fonts, например PT Sans, укажите галочками нужные стили начертания (обычный, наклонный, полужирный), набор стилей (latin обязательно, и cyrillic для русского языка). Затем вам предложат варианты подключения:

Варианты подключения Google Fonts

Варианты подключения Google Fonts

Здесь нас будет интересовать только сам URL шрифта: http://fonts.googleapis.com/css?family=PT+Sans&subset=latin,cyrillic

Теперь открываем файл functions.php вашей темы WordPress и в конце файла добавляем новую функцию:

function google_font_styles() {
  if (!is_admin()) {
    wp_register_style('googlefont', 'http://fonts.googleapis.com/css?family=PT+Sans&subset=latin,cyrillic');
    wp_enqueue_style('font', get_stylesheet_uri(), array('googlefont') );
  }
}
add_action('wp_enqueue_scripts', 'google_font_styles');

Сохраняем изменения в functions.php и открываем style.css.

Здесь нам нужно указать те элементы, в которых мы хотим использовать установленный шрифт. Например, чтобы этот шрифт работал по всему сайту, нужно в стилях тега body указать:

body {
  font-family: 'PT Sans', sans-serif;
}

Данный код указывает, что весь текст находящийся внутри тега body должен отображаться шрифтом PT Sans, а в случае если шрифт все-таки не найден (некоторые старые мобильные браузеры не поддерживают такие возможности) будет использован шрифт с засечками по-умолчанию (sans-serif). Перед sans-serif можно указать любые другие шрифты, которые должны заменить PT Sans в случае если по какой-то причине использование PT Sans невозможно.

Вот и все! Проверяйте результат =)