Коротко: шрифт в WordPress подключают двумя способами: через wp_enqueue_style в functions.php (например, Google Fonts) или локально через @font-face и файлы шрифтов в теме. После подключения его назначают в CSS через font-family.
Способы подключения
| Способ | Особенность |
|---|---|
| Google Fonts | быстро, но внешний запрос |
| Локальные файлы | полный контроль, быстрее для GDPR |
| Плагин | без кода |
| Редактор сайта | настройка типографики в теме |
Подключение в functions.php
php
add_action('wp_enqueue_scripts', function () {
wp_enqueue_style(
'google-fonts',
'https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap',
[], null
);
});Параметр display=swap показывает текст сразу системным шрифтом, а затем подменяет его загруженным — так пользователь не смотрит на пустой экран.
Вкладки: локальный шрифт
@font-face {
font-family: 'MyFont';
src: url('fonts/myfont.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}Файлы шрифтов кладут в папку темы и подключают правилом @font-face. Формат woff2 — самый компактный и современный.
body {
font-family: 'MyFont', Arial, sans-serif;
}После подключения шрифт назначают через font-family. Системные шрифты в конце списка — запасной вариант, если основной не загрузится.
<link rel="preload" as="font"
type="font/woff2" crossorigin>Предзагрузка ускоряет появление шрифта. Не подключайте десяток начертаний — каждый файл увеличивает вес страницы.
header.php тегами link или style — это ломает очередь загрузки и конфликтует с темами. В WordPress ресурсы подключают через wp_enqueue_style.Практика: подключить шрифт
- Выберите шрифт и нужные начертания.
- Скачайте файлы или возьмите ссылку Google Fonts.
- Подключите через
functions.phpили@font-face. - Назначьте шрифт в CSS через
font-family. - Добавьте
font-display: swap. - Проверьте загрузку и вид текста на разных устройствах.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Шрифт не применяется | имя в font-family не совпадает |
исправить название |
| Текст «прыгает» | нет font-display |
swap |
| Русские буквы отсутствуют | в шрифте нет кириллицы | выбрать шрифт с кириллицей |
| Сайт тормозит | много начертаний | оставить 2–3 |
| Правки пропали | правили основную тему | дочерняя тема |
Проверьте себя
font-display: swap?
Вопросы и ответы
Чаще всего имя в font-family не совпадает с названием в подключении, либо правило перебито стилями темы. Проверьте имя и приоритет селектора в инспекторе.
Google Fonts проще и быстрее в подключении, но это внешний запрос. Локальные файлы дают полный контроль, не зависят от чужих серверов и работают без внешних обращений.
Он ускоряет загрузку основного шрифта, но применять его стоит только к главному начертанию. Если предзагрузить всё, эффект будет обратным.
Обычно два-три: обычное, жирное и, при необходимости, курсив. Каждое начертание — отдельный файл и дополнительный вес страницы.
Итоги
- Шрифт подключают через
wp_enqueue_styleили@font-face. - В CSS шрифт назначают через
font-family. font-display: swapизбавляет от пустого текста при загрузке.- Ограничивайте число начертаний ради скорости.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.