Шрифты для WordPress зачастую загружаются с внешнего источника, например Google Font. Такая ситуация может приводить к ошибкам при тестировании скорости загрузки в таких сервисах как GTmetrix / Pingdom, если загружать шрифты для ВордПресс локально данная ошибка должна пропасть.
Вы не можете управлять некоторыми внешними ресурсами и сценариями, что делает их невозможными для сжатия, минимизации или оптимизации. Это может серьезно повлиять на вашу скорость загрузки WordPress. Одним из наиболее распространенных внешних ресурсов являются для WordPress – fonts, а именно Google Fonts, как мы отмечали выше. Если вы уже сделали оптимизацию WordPress и избавились от медленных плагинов ВордПресс, вы можете начать замечать, что на внешние ресурсы (шрифты для ВордПресс), плагин кэширования никак не влияет. О том как изменить шрифт в WordPress, для его более быстрой загрузки поговорим ниже. Это позволяет вашему к’ш-плагину сжимать все ресурсы, связанные с вашим шрифтом.
Выбрать шрифты для WordPress в Google
В этом примере мы будем использовать шрифт Roboto с двумя весами шрифта: обычный (400) и жирный (700).
Будьте избирательны с весами шрифта — количество весов также влияет на время загрузки. Если вам нужна только жирная версия, снимите флажки с других весов, чтобы шрифты Google загружалиcm только те, которые вам нужны.
Загрузите шрифт Google Fonts
Загрузите шрифты, когда окончательно определитесь с выбором. Google автоматически загрузит все веса шрифтов, поэтому выбор веса шрифтов на этом шаге не требуется, а выбор нужного начертание потребуется в дальнейшем.
Преобразование шрифтов, чтобы добавить шрифт в ВордПресс
Далее мы преобразуем эти файлы шрифтов (.ttf) в файлы веб-шрифтов. Мы будем использовать Transfonter. Перейдите на их сайт, нажмите:
- «Добавить шрифты (add fonts)».
- Затем загрузите только те типы шрифтов, которые вы будете использовать на своем сайте. В нашем случае Roboto- ttf и Roboto-Bold.ttf. Оставьте настройки по умолчанию, так как WOFF и WOFF2 охватывают все основные браузеры.
- Теперь нажмите конвертировать.
После того как процесс конвертации завершиться, загрузите преобразованные файлы шрифтов. Конвертированные шрифты вы можете скачать в 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:
|
1 2 |
src: url('Roboto-Bold.woff2') format('woff2'), url('Roboto-Bold.woff') format('woff'); |
Измените их на:
|
1 2 |
src: url('http://example.com/wp-content/uploads/fonts/Roboto-Regular.woff2') format('woff2'), url(http://example.com/wp-content/uploads/fonts/Roboto-Regular.woff') format('woff'); |
В основном, просто укажите URL-адрес папки перед именем файла шрифта.
Как изменить шрифт в wordpress?
Это необязательно, но если вы хотите знать, как изменить шрифт в вордпресс, создав собственный класс, чтобы легко использовать шрифт в существующем HTML. Мы назвали наши классы roboto_font и roboto_bold_font. Чтобы сделать это, добавьте это в свой файл style.css:
|
1 2 3 4 5 6 |
.roboto_font { font-family: “Roboto”, “Arial”, sans-serif; } .roboto_bold_font { font-family: “Roboto”, “Arial”, sans-serif;font-weight: bold; } |
Проверить работу шрифта в WordPress
Теперь вы знаете, как поменять шрифт в ВордПресс и настало время протестировать, что все работает корректно. Создайте тестовую страницу и поместите следующий код в текстовый редактор:
|
1 2 3 |
<h2>Тестовый заголовок</h2> <h2 class="roboto_font"> wordpress размер шрифта H1 </h2> <h2 class="roboto_bold_font"> Тестовый шрифт Вордпрес H2 </h2> |
Если вы сделали это правильно, вы должны увидеть новый шрифт! Первый заголовок — это шрифт по умолчанию на вашем сайте, второй и третий — это шрифты Google Fonts, которые мы добавили.
Установка шрифта WordPress по умолчанию
Чтобы сделать этот шрифт по умолчанию на вашем сайте, добавьте этот CSS в ваш файл style.css:
|
1 2 3 |
body { font-family: “Roboto”, “Arial”, sans-serif; } |
Всегда имейте запасные варианты шрифта WordPress
Неправильно применять Google Font как семейство шрифтов. Вместо этого вы должны указать несколько шрифтов, включая распространенные, такие как:
- Arial
- Times New Roman
Это позволит браузеру использовать эти шрифты на тот случай, если шрифт не загружается или загружается дольше.
Пример без альтернативы:
|
1 |
font-family: 'Roboto'; |
Пример с резервным шрифтом:
|
1 |
font-family: 'Roboto', Arial, sans-serif; |
Теперь, если вам не удастся загрузить ваши Google Fonts, браузер переключится на шрифт Arial или шрифт Sans-Serif по умолчанию, и не вызовет проблем с рендерингом шрифтов.
