Шрифты для WordPress, как изменить шрифт в wordpress, чтобы он загружались локально

Шрифты для WordPress зачастую загружаются с внешнего источника, например Google Font. Такая ситуация может приводить к ошибкам при тестировании скорости загрузки в таких сервисах как GTmetrix / Pingdom, если загружать шрифты для ВордПресс локально данная ошибка должна пропасть.

Вы не можете управлять некоторыми внешними ресурсами и сценариями, что делает их невозможными для сжатия, минимизации или оптимизации. Это может серьезно повлиять на вашу скорость загрузки WordPress. Одним из наиболее распространенных внешних ресурсов являются для WordPress – fonts, а именно Google Fonts, как мы отмечали выше. Если вы уже сделали оптимизацию WordPress и избавились от медленных плагинов ВордПресс, вы можете начать замечать, что на внешние ресурсы (шрифты для ВордПресс), плагин кэширования никак не влияет. О том как изменить шрифт в WordPress, для его более быстрой загрузки поговорим ниже. Это позволяет вашему к’ш-плагину сжимать все ресурсы, связанные с вашим шрифтом.

Примечание: Сделайте полный бэкап WordPress сайта (или, по крайней мере, файлов, которые вы редактируете) перед внесением изменений.

Выбрать шрифты для WordPress в Google

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

Примечание: Используйте меньше шрифтов Google(меньше шрифтов = меньше запросов).

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

wordpress размер шрифта

Загрузите шрифт Google Fonts

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

добавить шрифт в вордпресс

Преобразование шрифтов, чтобы добавить шрифт в ВордПресс

шрифты для вордпресс

Далее мы преобразуем эти файлы шрифтов (.ttf) в файлы веб-шрифтов. Мы будем использовать Transfonter. Перейдите на их сайт, нажмите:

  1. «Добавить шрифты (add fonts)».
  2. Затем загрузите только те типы шрифтов, которые вы будете использовать на своем сайте. В нашем случае  Roboto- ttf и Roboto-Bold.ttf. Оставьте настройки по умолчанию, так как WOFF и WOFF2 охватывают все основные браузеры.
  3. Теперь нажмите конвертировать.

шрифты для wordpress

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

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

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

Пример:

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

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

Добавление шрифта в CSS файл WordPress

Далее мы добавим CSS, который вы получили внутри загруженного zip-файла с именем stylesheet.css . Это код CSS, который соединит ваши шрифты с существующим CSS и сделает их готовыми к использованию.

Где разместить код CSS субъективно, но вы можете использовать внешнюю таблицу стилей или функцию wp_enqueue_style WordPress в functions.php или в начале вашего файла style.css (custom.css,  если он у вас есть). Мы собираемся вставить его в стандартный файл style.css темы. Скопируйте / вставьте код в таблицу стилей и измените любые относительные URL-адреса на абсолютные.

URL-адреса по умолчанию в stylesheet.css:

Измените их на:

В основном, просто укажите URL-адрес папки перед именем файла шрифта.

Как изменить шрифт в wordpress?

Это необязательно, но если вы хотите знать, как изменить шрифт в вордпресс, создав собственный класс, чтобы легко использовать шрифт в существующем HTML. Мы назвали наши классы roboto_font и roboto_bold_font. Чтобы сделать это, добавьте это в свой файл style.css:

Проверить работу шрифта в WordPress

Теперь вы знаете, как поменять шрифт в ВордПресс и настало время протестировать, что все работает корректно. Создайте тестовую страницу и поместите следующий код в текстовый редактор:

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

Установка шрифта WordPress по умолчанию

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

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

Всегда имейте запасные варианты шрифта WordPress

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

  • Arial
  • Times New Roman

Это позволит браузеру использовать эти шрифты на тот случай, если шрифт не загружается или загружается дольше.

Пример без альтернативы:

Пример с резервным шрифтом:

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

Примечание: Повторно протестируйте свой сайт (в GTmetrix). В нем не должно быть ошибок связанных с Google Fonts.
Мы будем рады и вашему мнению

Оставить отзыв

Veraksoff.info
Регистрация
Сбросить пароль
Сравнить товары
  • Всего (0)
Сравнить