Як локально завантажувати шрифти Google у WordPress: елемент оптимізації, знайдений у GTmetrix, Pingdom та Google PageSpeed ​​Insights

Якщо на вашому сайті WordPress є Google Font помилки в GTmetrix/Пінгдом, завантаження локальних шрифтів Google має виправити їх.


Ви не можете керувати деякими зовнішніми ресурсами та сценаріями, що унеможливлює їх стиснення, мінімізацію чи оптимізацію. Це може серйозно вплинути на швидкість роботи WordPress. Один з найпоширеніших зовнішніх ресурсів – Google Fonts. Якщо у вас вже налаштований плагін кешу, як WP Rocket або WP Fastest Cache, ви можете почати помічати зовнішні ресурси, наприклад шрифти, що впливають на категорії + час завантаження. Тут грає локальне завантаження Google Fonts. Це дозволяє вашому плагіну кешу стискати всі ресурси, пов’язані з вашими спеціальними шрифтами.

Перед внесенням змін створіть повну резервну копію свого веб-сайту (або принаймні файлів, які ви редагуєте).

Google-Fonts-GTmetrix

Крок 1. Виберіть шрифт Google

У цьому прикладі ми будемо використовувати Шрифт Roboto з двома вагами шрифту: звичайний (400) та жирний (700).

Вибір Google-шрифтів

Використовуйте менше шрифтів Google – мінімізуйте свої шрифти Google (менше шрифтів = менше запитів).

Будьте вибіркові за допомогою ваг шрифту – кількість ваг також впливає на час навантаження. Якщо вам потрібна лише жирна версія, зніміть прапорці з іншими вагами, щоб Google Шрифти завантажували лише ті, що вам потрібні.

Крок 2: Завантажте шрифт

Завантажте шрифти, коли будете готові. Google автоматично завантажує всі ваги шрифту, тому на цьому кроці не потрібно вибирати вагу шрифту, а замість цього потрібно на кроці 3.

Завантажити шрифти Google

Крок 3: Перетворення шрифтів у веб-шрифти

Далі ми перетворимо ці файли шрифтів (.ttf) у файли веб-шрифтів. Я буду користуватися Трансфонтер. Перейдіть на їхній сайт, натисніть Додати шрифти, тоді завантажуйте на свій веб-сайт лише ті шрифти, якими ви користуєтесь. Я використовую Roboto-Regular.ttf і Roboto-Bold.ttf тому у мене є як звичайні, так і сміливі ваги. Залиште налаштування за замовчуванням, оскільки WOFF та WOFF2 охоплюють усі основні браузери. Тепер натисніть конвертувати.

Transfonter-Google-Font-Conversion

Вибирайте лише типи шрифтів, які ви будете використовувати на своєму веб-сайті…

Google-Шрифти-Перетворення-Вибір

Крок 4: Завантажте конвертовані файли шрифтів

Після перетворення шрифтів ви можете їх завантажити. У zip-файлі кожен шрифт буде містити формати WOFF та WOFF2 (оскільки ми завантажили 2 шрифти, у нас буде 4 файли шрифтів).

WOFF-Google-Font-Conversion

Крок 5: Завантажте файли шрифтів у файли WordPress

Завантажуйте файли веб-шрифтів через FTP або cPanel, в ідеалі в wp-content / uploads папку, щоб тема та основні оновлення не змінювали їх. Я створив папку «шрифти» і завантажив їх туди (щоб відокремити їх від інших файлів). Щоб підтвердити, що вони були успішно завантажені та у вас є правильні посилання, відкрийте посилання у своєму браузері і шрифти повинні розпочати завантаження.

Приклад:

  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff2

Замініть yourwebsite.com із власним веб-сайтом (і HTTPS, якщо використовується SSL). В ідеалі протестуйте всі 4 посилання та переконайтеся, що ви правильні URL-адреси (а також не забудьте зберегти їх десь).

Крок 6: Додайте спеціальний шрифт до CSS

Далі ми додамо CSS, який ви отримали всередині завантаженого zip-файлу з назвою stylesheet.css. Це код CSS, який з’єднає ваші шрифти з вашим існуючим CSS та зробить їх готовими до використання.

Де розмістити CSS-код суб’єктивно, але ви можете використовувати зовнішню таблицю стилів або WordPress ‘ wp_enqueue_style функціонувати у функції.php або на початку вашого style.css файл (або custom.css якщо у вас є). Я збираюсь вставити його у файл за замовчуванням style.css теми. Скопіюйте / вставте код у таблицю стилів та змініть будь-які відносні URL-адреси на абсолютні URL-адреси.

URL-адреси за замовчуванням у stylesheet.css:
src: url (‘Roboto-Bold.woff2’) формат (‘woff2’),
формат url (‘Roboto-Bold.woff’) (‘woff’);

Змініть їх на:
src: url (‘http://yourwebsite.com/wp-content/uploads/fonts/Формат Roboto-Regular.woff2 ‘) (‘ woff2 ‘),
URL (‘http://yourwebsite.com/wp-content/uploads/fonts/Формат Roboto-Regular.woff ‘) (‘ woff ‘);

В основному просто включіть URL-адресу папки перед назвою файлу шрифту.

Це необов’язково, але якщо ви хочете, створіть спеціальний клас, щоб легко використовувати шрифт у наявному HTML. Тут ми назвали наші класи roboto_font і roboto_bold_font. Для цього додайте це до файлу style.css (після наведеного вище коду):

.roboto_font {

сімейство шрифтів: “Roboto”, “Arial”, sans-serif;

}

.roboto_bold_font {

сімейство шрифтів: “Roboto”, “Arial”, sans-serif;

шрифт: жирний шрифт;

}

Крок 7: Тестуйте шрифт

Тепер створіть тестову сторінку та поставте наступний код у Текстовий редактор

Тестування

Спеціальний тест шрифту

Спеціальний тест шрифту

Тестування Google-шрифтів

Попередній перегляд сторінки. Якщо ви зробили це правильно, вам слід побачити новий спеціальний шрифт! Перший заголовок – це шрифт за замовчуванням вашого веб-сайту, другий і третій – шрифти Google Fonts, які ми додали:

Local-Google-Fonts

Крок 8: Встановіть шрифт за замовчуванням

Щоб зробити цей шрифт за замовчуванням для вашого веб-сайту, додайте цей CSS у файл style.css:

корпус {

сімейство шрифтів: “Roboto”, “Arial”, sans-serif;

}

Будь обережний! Якщо у вас вже є власний шрифт, він може відображатися неправильно і вимагає налагодження чи редагування наявних властивостей сімейства шрифтів та заміни цього замість цього.

Крок 9: Завжди майте резервні шрифти

Неправильно застосовувати шрифт Google як сімейство шрифтів. Натомість у вас повинно бути вказано кілька шрифтів, включаючи загальні шрифти, такі як Arial, Times New Roman, щоб браузер міг повернутися до цих шрифтів на випадок, якщо шрифт не завантажується чи не потрібно більше часу для завантаження.

Без резервного:
сімейство шрифтів: ‘Roboto’;

З резервним шрифтом:
сімейство шрифтів: “Roboto”, Аріал, без зарубок;

Тепер, якщо не вдасться завантажити ваші шрифти Google, браузер повернеться до шрифту Arial або до типового типу шрифту sans-serif системи та не спричинить жодних проблем із візуалізацією шрифту..

Перевірте свій веб-сайт (в GTmetrix)

Ви не повинні бачити в ньому помилок Google Fonts…

New-GTmetrix-Report.png

Маєте запитання? Черкніть мені кілька рядків.

Часті запитання

&# x2705; Як пришвидшити Google Fonts?

Поєднання Google Шрифтів, розміщення їх локально та попереднє підключення та попереднє налаштування їх може допомогти покращити час завантаження. Перевірте свій водоспад GTmetrix, щоб отримати орієнтир ваших шрифтів, а потім повторно протестуйте його після оптимізації.

&# x2705; Як конвертувати шрифти файли веб-шрифтів?

Ми використовуємо Transfonter.

&# x2705; Як щодо користувацьких шрифтів Elementor?

Власні шрифти Elementor також можуть локально розміщувати шрифти Google і вбудовані в Elementor Pro. Ви можете використовувати це для завантаження файлів шрифтів.

&# x2705; Які плагіни допомагають оптимізувати шрифти?

WP Rocket, OMGF, Autoptimize та Perfmatters можуть допомогти вам оптимізувати шрифти.

&# x2705; Як щодо попереднього завантаження та попереднього підключення шрифтів?

Вони можуть пришвидшити шрифти, допомагаючи браузерам передбачити їх краще. Ми використовуємо плагін Perfmatters від Kinsta для попереднього вибору та попереднього підключення шрифтів, але ви також можете використовувати WP Rocket або плагін Pre Party Resource Hints..

Ура,
Усама

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map