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

Шрифти Google Web - Відмінне джерело шрифтів для веб-дизайнерів. У WPBv4 почали використовувати популярне поєднання шрифтів Шрифт Google: гарнітури Oswald и Lora. Деякі користувачі ставили запитання щодо того, чи можна використовувати шрифти від Google у темах WordPress і про те, як це зробити. У цій статті йдеться про те, як додавати шрифти Google Web Fonts до тем WordPress правильно і при цьому не вплинути на швидкодію вашого сайту.

Шукаємо шрифти Google Web Fonts, які вам подобаються

Спочатку потрібно знайти ті шрифти від Google, які вам подобаються. Пошукайте варіанти серед запропонованих у бібліотеці шрифтів під назвою Бібліотека шрифтів Google. Як тільки знайдете відповідний варіант, клацніть на кнопку 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, Книга Буття). Проте це не зовсім коректний метод додавання відкритих шрифтів. Використання методу @import блокує паралельне скачування, в результаті чого веб-браузер спочатку до кінця завантажуватиме файл зі шрифтами і тільки потім продовжить завантажувати решту контенту вашого веб-сайту. Тому, хоча такий спосіб здається зручним, це не найкращий спосіб для роботи зі шрифтом, якщо вам небайдужа швидкість та продуктивність вашого сайту. Подробиці про ці нюанси ви можете прочитати тут.

Найкращим буде об'єднання запитів до різних шрифтів Google Fonts один запит, щоб уникнути надмірної кількості HTTP-запитів. Ось як це зробити. Додаємо код:

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

Якщо навіть ви змушені використовувати @importпринаймні об'єднайте множинні запити в один.

Як додати шрифти Google Web Fonts без шкоди для продуктивності сайту

Найкращим буде використання стандартного методу, за допомогою якого використовуються посилання, а не імпорт файлу. Просто візьміть дві адреси URL з першого кроку цієї інструкції. Об'єднайте 2 різні шрифти, додавши між ними символ. | . Потім помістіть отриманий код у блок голова вашої теми. Для цього вам доведеться відредагувати файл 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якщо є тег скрипта перед оголошенням шрифту @ шрифт-обличчя, тоді Internet Explorer нічого не буде рендерувати на сторінці, доки не завантажиться файл самого шрифту.

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

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

Є чимало дочірніх тем та фреймворків. Не рекомендується змінювати файли батьківської теми, особливо якщо ви використовуєте фреймворк; тому що зміни у темі будуть стерті щоразу, як ви оновлюєте версію фреймворку. Вам доведеться попрацювати над надбудовами та фільтрами у батьківській темі або її фреймворку, якщо хочете додати коректно шрифти від Google до дочірніх тем.

Наприклад, якщо подивитися на сторінку Планкоманда створила тему WPBv4 як кастомну дочірню тему від фрейморка Книга Буття. Давайте подивимося, як додавати шрифти Google Web у дочірню тему на основі Книга Буття.

Як додати шрифти Google Web Fonts до дочірньої теми на базі Книга Буття

Відкрийте дочірню тему та її файл 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/