Шрифты для WordPress. Добавить шрифт (fonts) в ВордПресс локально

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

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

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

Содержание

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

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

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

Будьте избирательны с весами шрифта — количество весов также влияет на время загрузки. Если вам нужна только жирная версия, снимите флажки с других весов, чтобы шрифты 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:

src: url('Roboto-Bold.woff2') format('woff2'),
url('Roboto-Bold.woff') format('woff');

1 2	src: url('Roboto-Bold.woff2') format('woff2'), url('Roboto-Bold.woff') format('woff');

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

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');

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:

.roboto_font {
font-family: “Roboto”, “Arial”, sans-serif;
}
.roboto_bold_font {
font-family: “Roboto”, “Arial”, sans-serif;font-weight: bold;
}

.roboto_font {

font-family: “Roboto”, “Arial”, sans-serif;

}

.roboto_bold_font {

font-family: “Roboto”, “Arial”, sans-serif;font-weight: bold;

}

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

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

<h2>Тестовый заголовок</h2>
<h2 class="roboto_font"> wordpress размер шрифта H1 </h2>
<h2 class="roboto_bold_font"> Тестовый шрифт Вордпрес H2 </h2>

<h2>Тестовый заголовок</h2>

<h2 class="roboto_font"> wordpress размер шрифта H1 </h2>

<h2 class="roboto_bold_font"> Тестовый шрифт Вордпрес H2 </h2>

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

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

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

body {
font-family: “Roboto”, “Arial”, sans-serif;
}

body {

font-family: “Roboto”, “Arial”, sans-serif;

}

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

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

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

Arial
Times New Roman

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

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

font-family: 'Roboto';

1	font-family: 'Roboto';

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

font-family: 'Roboto', Arial, sans-serif;

1	font-family: 'Roboto', Arial, sans-serif;

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

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