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

Если ваш сайт WordPress имеет Google Font ошибки в GTmetrix/Pingdom, загрузка Google Fonts локально должна их исправить.


Вы не можете контролировать некоторые внешние ресурсы и сценарии, что делает их невозможными для сжатия, минимизации или оптимизации. Это может серьезно повлиять на вашу скорость WordPress. Одним из наиболее распространенных внешних ресурсов являются Google Fonts. Если вы уже настроили плагин кеша, такой как WP Rocket или WP Fastest Cache, вы можете начать замечать внешние ресурсы, такие как шрифты, влияющие на оценки + время загрузки. Это где загрузка Google Fonts локально вступает в игру. Это позволяет вашему кеш-плагину сжимать все ресурсы, связанные с вашим пользовательским шрифтом.

Сделайте полную резервную копию своего сайта (или, по крайней мере, файлов, которые вы редактируете) перед внесением изменений.

Google-шрифты-GTmetrix

Шаг 1. Выберите шрифт Google

В этом примере мы будем использовать Шрифт Roboto с двумя весами шрифта: обычный (400) и жирный (700).

Google-шрифты-Selection

Используйте меньше шрифтов Google – сведите ваши Google шрифты к минимуму (меньше шрифтов = меньше запросов).

Будьте избирательны с весом шрифта – количество весов также влияет на время загрузки. Если вам нужна только жирная версия, снимите флажки с других весов, чтобы шрифты Google загружали только те, которые вам нужны.

Шаг 2: Скачать шрифт

Загрузите шрифты, когда будете готовы. Google автоматически загрузит все веса шрифтов, поэтому выбор веса шрифтов на этом шаге не требуется, а вместо этого требуется на шаге 3.

Google-шрифты-Скачать

Шаг 3. Преобразование шрифтов в веб-шрифты

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

Transfonter-Google-Font-Конверсия

Выберите только те типы шрифтов, которые вы будете использовать на своем веб-сайте …

Google-шрифты-Конверсия-Selection

Шаг 4: Загрузите преобразованные файлы шрифтов

Как только шрифты конвертированы, вы можете скачать их. В zip-файле каждый шрифт будет включать форматы WOFF и WOFF2 (так как мы загрузили 2 шрифта, у нас будет всего 4 файла шрифтов).

Уофф-Google-Font-Конверсия

Шаг 5. Загрузка файлов шрифтов в файлы WordPress.

Загрузите файлы веб-шрифтов через FTP или cPanel, в идеале в WP-содержание / добавления папка, чтобы тема и обновления ядра не перекрывали их. Я создал папку «шрифты» и загрузил их туда (чтобы отделить их от других файлов). Чтобы убедиться, что они были успешно загружены и у вас есть правильные ссылки, откройте ссылки в браузере, и шрифты должны начать загружаться..

Пример:

  • 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 функция в functions.php, или в начале вашего style.css файл (или Пользовательские CSS если у тебя есть). Я собираюсь вставить его в стандартный файл style.css темы. Скопируйте / вставьте код в таблицу стилей и измените любые относительные URL-адреса на абсолютные..

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

Измените их на:
источник: 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», без засечек;

}

.roboto_bold_font {

семейство шрифтов: «Roboto», «Arial», без засечек;

вес шрифта: полужирный;

}

Шаг 7: Проверьте шрифт

Теперь создайте тестовую страницу и поместите следующий код в Текстовый редактор

тестирование

Тест пользовательских шрифтов

Тест пользовательских шрифтов

Google-шрифты-тестирование

Предварительный просмотр страницы. Если вы сделали это правильно, вы должны увидеть новый пользовательский шрифт! Первый заголовок – это шрифт по умолчанию для вашего сайта, второй и третий – это шрифты Google Fonts, которые мы добавили:

Локально-Google-шрифты

Шаг 8: установите шрифт по умолчанию

Чтобы сделать этот шрифт по умолчанию вашим веб-сайтом, добавьте этот CSS в ваш файл style.css:

тело {

семейство шрифтов: «Roboto», «Arial», без засечек;

}

Быть осторожен! Если у вас уже есть собственный шрифт, он может отображаться неправильно и требует отладки или редактирования существующих свойств семейства шрифтов и замены их этим.

Шаг 9: всегда иметь запасные варианты шрифта

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

Без отступления:
семейство шрифтов: ‘Roboto’;

С резервным шрифтом:
семейство шрифтов: ‘Roboto’, Arial, без засечек;

Теперь, если вам не удастся загрузить ваши Google Fonts, браузер переключится на шрифт Arial или шрифт Sans-Serif по умолчанию и не вызовет проблем с рендерингом шрифтов..

Повторно протестируйте свой сайт (в GTmetrix)

В нем не должно быть ошибок Google Fonts …

New-GTmetrix-Report.png

Есть вопросы? Напишите мне.

Часто задаваемые вопросы

&# X2705; Как вы ускоряете Google Fonts?

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

&# X2705; Как конвертировать шрифты в файлы веб-шрифтов?

Мы используем Transfonter.

&# X2705; А как насчет пользовательских шрифтов Elementor?

Elementor Custom Fonts также может размещать Google Fonts локально и встроен в Elementor Pro. Вы можете использовать это для загрузки файлов шрифтов.

&# X2705; Какие плагины помогают оптимизировать шрифты?

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

&# X2705; Как насчет предварительной выборки и предварительного подключения шрифтов?

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

ура,
Usama

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