Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

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

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

Спочатку потрібно знайти ті шрифти від Google, які вам подобаються. Пошукайте варіанти серед запропонованих у бібліотеці шрифтів під назвою Бібліотека шрифтів Google. Як тільки знайдете відповідний варіант, клацніть на кнопку Quick-use:

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

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

Після натискання цієї кнопки ви опинитеся на новій сторінці. Прокрутіть доти, доки не побачите форму з назвою "Add this code to your website":

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

Скопіюйте код і вставте його в блокнот, ми будемо використовувати його пізніше. Зазвичай використовується як мінімум 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
inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 12

Evgeniy Fadeev:

Ці два шрифти підтримують кирилицю?

WordPresso:

Шрифти, про які йдеться в уроці, не підтримують кирилицю.

muph:

Для кого цей урок?

WordPresso:

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

Залізний Фелікс:

Ще простіше: завантажуємо з гугла ttf і через фонтсквірел робимо набір для різних браузерів.

Oksana Kutsenko:

А чи можна докладніше? Зробила і як тепер адаптувати їх для сайту на WordPress&

Alex:

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

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

є аналог Myriad Pro — PT Sans Narrow

Джо:

не працює чомусь. Все роблю за прикладом, але шрифти не діють

Гульнара:

Як додати шрифти до редактора FCK editor?

gOuTM:

А ось, скажімо, шрифти завантажені в тему через @import. Як зробити так, щоб обраним шрифтом нормально відображався російський текст, за умови, що сам шрифт cyrillic І cyrillic ext підтримує?

Denis Creative:

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

Додати коментар або відгук