Roboto в заголовках, Open Sans в тексте. Типографика сайта выглядит как у половины WordPress-установок. Посетитель заметил шаблон, узнал шрифт, и сайт потерял часть индивидуальности ещё до первого абзаца.

Кастомный шрифт подключается к WordPress двумя способами: через плагин за 2 минуты без единой строчки кода или вручную через @font-face с полным контролем над файлами. Оба работают надёжно, выбор зависит от вашего опыта с CSS.

Ниже разберём где брать шрифты, как настроить плагин и как прописать @font-face в дочерней теме. Код взят из рабочих установок: вставьте, замените имя файла, и типографика готова.

💡 Быстрый обзор:

• Скачайте шрифт на DaFont или FontSquirrel в формате WOFF2 или TTF: минимум три начертания (обычное, жирное, курсив).
• Установите Use Any Font или Fonts Plugin, загрузите файл через админку и назначьте шрифт на элементы. Код не нужен.
• Либо подключите вручную: создайте папку fonts в дочерней теме, загрузите файлы по FTP и пропишите @font-face в style.css для каждого начертания.
• Проверьте отображение в нескольких браузерах и не ставьте больше двух кастомных шрифтов: каждый файл увеличивает вес страницы.

Где брать шрифты и в каком формате

Google Fonts знают все, именно поэтому они везде. Если нужно что-то менее заезженное, вот три проверенные площадки.

DaFont предлагает более 3 500 шрифтов с категориями от комиксов до винтажа. Большинство бесплатны для личного использования. Для коммерческого проекта проверяйте лицензию каждого файла отдельно, они указаны на странице шрифта.

FontSquirrel фокусируется на бесплатных шрифтах с коммерческой лицензией. Коллекция небольшая, зато каждый шрифт проверен юристами. Встроенный генератор конвертирует скачанный файл в WOFF и WOFF2 одним кликом.

FontSpring продаёт платные шрифты, но почти в каждой семье есть одно-два бесплатных начертания. Перед скачиванием внимательно читайте лицензию: у разных начертаний могут быть разные условия.

Общее правило: не ставьте на сайт больше двух кастомных шрифтов. Один для заголовков, второй для основного текста, этого достаточно. Каждый файл добавляет HTTP-запрос и увеличивает вес страницы на 30-100 КБ.

Скачивайте все начертания сразу: обычное, жирное, курсив и жирный курсив. Если файл только одного начертания, браузер будет имитировать bold и italic искусственным утолщением, результат выглядит грубо.

Способ 1: плагин за 2 минуты

Плагин, самый простой путь. Установили, загрузили файл шрифта, выбрали где применить. Никакого кода, никаких FTP-соединений.

Use Any Font

🔗 Use Any Font на WordPress.org

🔗 Скриншоты и демо

Загружает шрифты в форматах TTF, OTF и WOFF, автоматически конвертирует в WOFF2 со сжатием Brotli. По данным страницы плагина на WordPress.org, загрузка ускоряется примерно на 30%. Шрифты хранятся на вашем сервере: GDPR-совместимость из коробки, без зависимости от внешних API после конвертации.

После установки получаете API-ключ (бесплатный Lite-ключ даёт одну конвертацию), загружаете файл и назначаете шрифт через визуальный интерфейс. Можно применить к заголовкам, абзацам или конкретным блокам прямо из админки.

Поддерживает интеграцию с Elementor, Divi, WPBakery, Gutenberg: назначаете шрифт один раз в плагине, он появляется в списке шрифтов билдера.

Обратите внимание: для нескольких шрифтов нужен Premium-ключ. Для типового сайта бесплатной версии хватает: один фирменный шрифт на заголовки, Google Fonts на текст.

Fonts Plugin

🔗 Fonts Plugin на WordPress.org

🔗 Скриншоты плагина

Бывший Olympus Google Fonts: переименован, функциональность расширилась. По данным страницы плагина, у него 200 000+ активных установок и рейтинг 5 звёзд от более 1 200 пользователей. Поддерживает Google Fonts, Adobe Fonts (Typekit) и загрузку собственных файлов.

Настройка идёт через кастомайзер: выбираете шрифт, видите предпросмотр в реальном времени, сохраняете.

Pro-версия добавляет локальный хостинг Google Fonts для GDPR, выборочную загрузку только нужных начертаний и управление кеглем, цветом, межстрочным интервалом. Бесплатной версии хватает для большинства сайтов.

Плагин или вручную: когда что выбирать

Плагин выигрывает скоростью: установка за 2 минуты, код не нужен. Но вы зависите от обновлений плагина и его совместимости с версией WordPress.

Ручная установка через @font-face сложнее в настройке, зато вы контролируете каждый байт. Никаких сторонних API, никаких обновлений, ломающих типографику.

Если вы уже работаете с дочерней темой, ручной метод органично впишется в ваш CSS. Шрифты станут частью темы и будут жить там годами.

Способ 2: ручная установка через @font-face

Директива @font-face подключает файлы шрифтов напрямую с вашего сервера. Поддерживаются форматы TTF, OTF, WOFF, WOFF2 и SVG. Для каждого начертания нужен отдельный блок кода.

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

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

Шаг 1: создайте папку для шрифтов

В папке дочерней темы создайте каталог fonts. Добавьте его через FTP или файловый менеджер хостинга:

1
wp-content/themes/your-child-theme/fonts/

Если у вас дочерняя тема называется twentytwentyfour-child, путь будет wp-content/themes/twentytwentyfour-child/fonts/.

Шаг 2: загрузите файлы шрифтов на сервер

Скопируйте скачанные файлы в папку fonts через FTP или файловый менеджер хостинга. Для каждого начертания, отдельный файл:

1
fonts/WebFont.woff2
2
fonts/WebFont.woff
3
fonts/WebFont-Bold.woff2
4
fonts/WebFont-Bold.woff
5
fonts/WebFont-Italic.woff2
6
fonts/WebFont-Italic.woff

На практике хватает форматов WOFF и WOFF2: они покрывают все современные браузеры и весят меньше TTF. По данным MDN Web Docs, WOFF2 сжимает шрифт на 30% эффективнее WOFF и поддерживается всеми браузерами с 2016 года.

Браузер сам выберет подходящий формат из подключённых: если поддерживает WOFF2, загрузит его, если нет, возьмёт WOFF.

Шаг 3: пропишите @font-face в style.css

Откройте style.css дочерней темы и добавьте код после заголовка темы (комментария с именем и описанием темы). Начните с обычного начертания:

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont.woff2') format('woff2'),
4
         url('fonts/WebFont.woff') format('woff');
5
    font-weight: normal;
6
    font-style: normal;
7
}

font-family, имя шрифта, которое будете использовать в CSS. Называйте так, чтобы не спутать с системными: не Arial, а MyBrandSans или BrandHeading. src, путь к файлам относительно style.css. Порядок важен: WOFF2 первым (самый лёгкий), WOFF вторым (fallback для старых браузеров).

Шаг 4: добавьте курсив

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-Italic.woff2') format('woff2'),
4
         url('fonts/WebFont-Italic.woff') format('woff');
5
    font-weight: normal;
6
    font-style: italic;
7
}

Обратите внимание: font-family тот же, font-weight остаётся normal, а font-style меняется на italic. Браузер сам подставит нужный файл под тег em и свойство font-style: italic.

Шаг 5: добавьте жирное начертание

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-Bold.woff2') format('woff2'),
4
         url('fonts/WebFont-Bold.woff') format('woff');
5
    font-weight: bold;
6
    font-style: normal;
7
}

Здесь font-style снова normal, а font-weight уже bold. Теперь тег strong и свойство font-weight: bold будут рисоваться вашим жирным файлом, а не браузерной имитацией утолщения. Разница заметна: настоящее жирное начертание сбалансировано дизайнером шрифта, имитация выглядит грубо.

Шаг 6: жирный курсив (опционально)

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-BoldItalic.woff2') format('woff2'),
4
         url('fonts/WebFont-BoldItalic.woff') format('woff');
5
    font-weight: bold;
6
    font-style: italic;
7
}

Четыре начертания покрывают практически все типографические задачи обычного сайта. Если дизайн не требует жирного курсива, пропустите этот шаг: файл не будет загружаться, пока CSS явно не запросит сочетание bold + italic.

Шаг 7: примените шрифт к элементам

После @font-face добавьте правила, которые назначат шрифт конкретным элементам. Добавьте в style.css дочерней темы:

1
body {
2
    font-family: 'MyWebFont', Arial, sans-serif;
3
}
4
 
5
h1, h2, h3 {
6
    font-family: 'MyWebFont', Georgia, serif;
7
}

Первое правило: ваш шрифт для основного текста, с fallback на системный Arial. Второе: тот же шрифт для заголовков, с fallback на Georgia.

Если файл шрифта не загрузился (сервер лег или путь неверный), сайт не останется без текста: браузер покажет Arial или Georgia. Fallback обязателен: без него браузер подставит дефолтный шрифт системы, обычно Times New Roman, и типографика развалится.

Готово. Кастомный шрифт подключён без плагинов и внешних сервисов. Типографика живёт на вашем сервере и не сломается, если сторонний API изменит условия или ляжет.

Видео: пошаговая настройка на живом сайте

Посмотрите, как весь процесс выглядит на реальном сайте WordPress от выбора шрифта до применения к заголовкам:

В ролике показаны оба способа: через плагин и через @font-face. Удобно поставить на паузу и повторять за автором. Видео на английском, но процесс визуально понятен и без озвучки.

⁉️🤔 Частые вопросы

Сколько кастомных шрифтов можно добавить на сайт?

Не больше двух: один для заголовков, второй для основного текста. Каждый шрифт тянет за собой несколько файлов начертаний от 30 до 100 КБ каждый. Два шрифта добавят ощутимый объём к загрузке страницы. Третий ухудшит скорость заметно, особенно на медленном мобильном соединении.

Обязательно ли создавать дочернюю тему для @font-face?

Формально нет: можно вставить @font-face прямо в style.css основной темы. Но после ближайшего обновления темы все правки исчезнут. Дочерняя тема решает это раз и навсегда. Если вы ещё не сделали её, наше руководство по дочерним темам WordPress проведёт от установки до первого результата.

Какой формат файла выбрать: WOFF, WOFF2 или TTF?

WOFF2, приоритетный. Он сжимает шрифт заметно сильнее WOFF и поддерживается всеми современными браузерами. WOFF, резервный вариант для старых версий браузеров. TTF и OTF подключайте только если шрифта нет в веб-форматах: они не сжаты и весят вдвое больше. Порядок в src всегда: WOFF2, затем WOFF.

Почему шрифт не отображается после установки?

Три частые причины. Первая: путь к файлу в url() неверный, проверьте что путь строится от style.css, а не от корня сайта. Вторая: кэш браузера держит старый CSS, откройте сайт в инкогнито или сбросьте кэш сочетанием Ctrl+F5. Третья: конфликт с темой, которая переопределяет font-family с более высоким приоритетом, проверьте в инспекторе какой CSS-селектор реально применяется к тексту.

Нужно ли указывать format() в src?

Формально браузер сам определяет формат по заголовкам файла. Но явный format('woff2') ускоряет выбор: браузер не загружает файл который заведомо не поддерживает. Поэтому всегда указывайте. Это рекомендация спецификации CSS Fonts Level 4.

Как проверить что шрифт загружается с моего сервера, а не извне?

Откройте DevTools (F12), вкладка Network, фильтр Fonts, обновите страницу. В списке должны быть только файлы с вашего домена. Если видите fonts.googleapis.com или fonts.gstatic.com, Google Fonts грузятся внешне. Для GDPR-совместимости переведите их на локальный хостинг через Fonts Plugin Pro или скачайте вручную и подключите через @font-face.

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

Оба метода работают надёжно. Выбор зависит от того, что для вас важнее: скорость настройки или контроль над каждым байтом.

Ставите шрифт первый раз и не хотите лезть в код, берите Use Any Font. Загрузили файл, назначили на заголовки, готово. Бесплатной версии хватает для одного фирменного шрифта на заголовки.

Нужен доступ к каталогу Google Fonts с живым предпросмотром прямо в кастомайзере, берите Fonts Plugin. Бесплатной версии хватает для большинства задач, Pro нужен только для локального хостинга Google Fonts под GDPR.

Уже работаете с дочерней темой и привыкли править CSS руками, выбирайте @font-face. Ноль внешних зависимостей, полный контроль, и после настройки вы не вспоминаете о типографике годами. Обновления темы не затронут шрифты, они живут в вашей дочерней теме как часть CSS.

Начните с плагина: это 2 минуты и никакого риска. А какой шрифт стоит на вашем сайте сейчас, стандартный темы или уже подключали свой?