Yabe Webfont - Плагин WordPress

Руководство по настройке Yabe Webfont для локальных шрифтов в WordPress

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

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

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

Какую задачу решает плагин и где он особенно полезен

Yabe Webfont закрывает задачу, которая часто возникает на стыке дизайна, скорости и приватности. В WordPress можно подключить шрифты вручную через дочернюю тему, файл стилей и правило @font-face, но такой подход быстро становится неудобным, когда сайт собирается в Elementor, Gutenberg, Bricks, Oxygen, GeneratePress, Kadence или другом визуальном редакторе. Редактору нужен выпадающий список, дизайнеру - единая типографика, владельцу сайта - минимальное число внешних запросов.

Плагин полезен в трёх основных сценариях. Первый - локальное размещение Google Fonts, когда выбранные семейства и варианты загружаются с вашего сервера, а не через стандартное подключение к Google. Второй - собственные брендовые шрифты, которые уже есть у компании в форматах WOFF2, WOFF или TTF. Третий - Adobe Fonts, где Yabe Webfont помогает синхронизировать проект по идентификатору и использовать семейства в WordPress.

Отдельная ценность плагина - интеграции. На официальной странице перечислены редакторы и конструкторы, где добавленные семейства должны появляться в интерфейсе выбора шрифта. При этом часть интеграций относится к Pro-возможностям, поэтому перед планированием миграции на конкретном сайте стоит сверить вашу связку темы и конструктора с актуальной страницей продукта.

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

Когда Yabe Webfont лучше ручного подключения

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

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

Кому подходит Yabe Webfont, а кому лучше выбрать другой путь

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

Для небольшого информационного сайта Yabe Webfont удобен как способ заменить стандартное подключение Google Fonts на локальное и оставить только нужные варианты. Для сайта с фирменным стилем он помогает загрузить брендовый шрифт, указать запасное семейство и проверить, как текст ведёт себя при медленной загрузке. Для агентства ценность выше: один и тот же подход можно повторять на нескольких проектах и объяснять клиенту через интерфейс WordPress.

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

Практический вывод: выбирайте Yabe Webfont, когда нужно управлять шрифтами через WordPress и редакторы. Не выбирайте его только потому, что "так проще", если на проекте уже есть строгая система сборки и ответственный разработчик.

Что проверить перед установкой и первым импортом

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

Технические требования и среда

По официальной документации для Yabe Webfont нужен современный WordPress и PHP не ниже указанного разработчиком минимума. Если сайт давно не обновлялся, сначала проверьте окружение в разделе Tools - Site Health или у хостинга. На мультисайте разработчик рекомендует активировать плагин на уровне отдельного сайта, а не рассчитывать на единое сетевое поведение для всех сайтов без проверки.

Также проверьте права на запись в папку загрузок WordPress. В changelog WordPress.org указано, что загруженные файлы плагин хранит в каталоге wp-content/uploads/yabe-webfont. Если хостинг запрещает запись, медиатека работает нестабильно или сайт обслуживается из read-only окружения, добавление шрифтов может завершиться ошибкой или файл не будет доступен в публичной части.

Лицензия и форматы шрифтов

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

Для современных сайтов обычно лучше начинать с WOFF2, потому что этот формат хорошо подходит для веба и даёт более компактные файлы. WOFF можно держать как совместимый вариант для старых сценариев, а TTF использовать осторожно: файл может быть крупнее и не всегда нужен посетителям. Если у вас variable font, проверьте, какие оси и диапазоны веса действительно используются в дизайне.

Карта текущих шрифтов

До установки откройте несколько типовых страниц сайта и посмотрите, откуда уже загружаются шрифты. Достаточно проверить исходный код страницы и вкладку сети в инструментах браузера. Ищите домены Google Fonts, файлы из темы, CSS конструктора и локальные файлы в uploads. Эта карта нужна, чтобы после настройки понять, что изменилось.

Проверка до старта: запишите 2-3 семейства, которые реально используются на сайте, и где они назначены: тема, конструктор, глобальные стили, отдельный блок или пользовательский CSS. Без этого легко добавить новый шрифт, но оставить старые внешние подключения активными.

Установка, первичное включение и безопасный первый тест

Установка проходит через обычный экран плагинов WordPress. Если у вас есть ZIP-архив, откройте Plugins - Add New - Upload Plugin, загрузите архив и нажмите Activate. Если используете каталог WordPress.org, найдите Yabe Webfont по названию, установите и активируйте его из админ-панели. После активации основной пункт находится в меню Appearance - Yabe Webfont.

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

Минимальный тест после активации

1. Откройте Appearance - Yabe Webfont и убедитесь, что интерфейс плагина загружается без ошибок.
2. Добавьте одно тестовое семейство: импортируйте Google Font или загрузите собственный WOFF2.
3. Опубликуйте шрифт через переключатель статуса и сохраните запись.
4. Откройте редактор страницы и проверьте, появился ли шрифт в нужном месте: блочный редактор, Site Editor, Elementor, Bricks или другой инструмент.
5. Примените шрифт к одному тестовому заголовку и откройте опубликованную страницу в приватном окне браузера.

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

Добавление собственных шрифтов: семейство, варианты и запасной шрифт

Собственный шрифт в Yabe Webfont добавляется через Add New. Важно мыслить не отдельным файлом, а семейством. Семейство может включать несколько вариантов: обычный вес, жирный вес, курсив, переменный диапазон. Если загрузить всё подряд без логики, сайт будет скачивать лишние файлы, а редактор получит запутанный список.

Название семейства и заголовок

Поле Font Family используется как техническое имя семейства в CSS. Его лучше писать аккуратно и стабильно, без случайных суффиксов вроде test-final-new. Если нужно дать редактору более понятную подпись, используйте поле Title. Это помогает отличать, например, фирменный заголовочный шрифт от текстового шрифта, не ломая CSS-имя.

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

Варианты и variable fonts

Вариант описывает вес и стиль. Для обычного сайта часто достаточно 2-4 вариантов: 400 для основного текста, 600 или 700 для заголовков и, если нужно, курсив. Variable font может покрывать диапазон, например 100 900, но это не значит, что его надо назначать везде. Используйте диапазон тогда, когда дизайн действительно меняет вес гибко.

Документация Yabe Webfont прямо показывает, что для variable fonts можно вводить пользовательский вес или диапазон. Это удобно, но требует проверки. Если браузер или редактор некорректно воспринимает диапазон, начните с обычных весов и только потом возвращайтесь к variable-настройке.

Файлы и медиатека

Загрузка выполняется через медиатеку WordPress, поэтому отдельный FTP-доступ не нужен. Для каждого варианта откройте панель, нажмите Upload Fonts, выберите файл и подтвердите выбор через Select. Если у вас есть несколько форматов одного и того же варианта, добавляйте их осознанно: WOFF2 как основной, WOFF только если нужен дополнительный охват.

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

Запасное семейство и область применения

В документации для пользовательского шрифта показан формат *|sans-serif в поле CSS Selector | Fallback Font. Звёздочка означает применение ко всем элементам, а часть после вертикальной черты задаёт запасное семейство. Для боевого сайта это сильное действие: оно может заменить шрифт везде, включая кнопки, формы, меню и админские элементы в публичной части.

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

Импорт Google Fonts на свой сервер без лишних начертаний

Для Google Fonts рабочий путь начинается с кнопки Import Google Fonts в разделе Appearance - Yabe Webfont. В документации описана последовательность: найти семейство, выбрать подмножества, форматы, variable-вариант при наличии, нужные начертания и затем опубликовать шрифт. Это выглядит просто, но именно на выборе подмножеств и вариантов чаще всего теряется смысл локального размещения.

Если сайт русскоязычный, проверьте наличие кириллицы или расширенной латиницы только там, где она действительно нужна. Не выбирайте все подмножества "на всякий случай". Подмножество - это набор символов, и лишний набор увеличивает объём файлов. При этом слишком узкий набор может привести к пустым символам или неожиданному fallback для имён, адресов, цитат и многоязычных элементов.

Как выбирать варианты

Начните от дизайна, а не от списка в интерфейсе. Если макет использует обычный текст, полужирные подзаголовки и жирный заголовок, выберите только эти веса. Если кнопки не используют курсив, не добавляйте курсивные варианты. Если variable font покрывает все нужные веса одним файлом и корректно работает в вашем браузерном наборе, это может быть удобным вариантом, но его всё равно нужно проверить.

После импорта откройте тестовую страницу и вкладку сети. Убедитесь, что загружается ожидаемое число файлов и что URL ведут на ваш домен или локальный путь сайта. В changelog плагина есть изменения, связанные с относительными путями и хранением файлов в каталоге загрузок, поэтому при переносе между окружениями проверка URL особенно важна.

Почему локальное размещение не равно автоматическому ускорению

Локальный файл убирает внешний запрос, но не делает шрифт бесплатным по весу. Если импортировать слишком много начертаний, сайт всё равно будет передавать большие файлы. Если не настроить font-display или запасное семейство, пользователь может увидеть скачок или задержку текста. Если тема продолжает подключать старые Google Fonts, вы получите и локальные файлы, и внешние запросы одновременно.

Правильная цель - меньше источников, меньше вариантов, понятный fallback и проверенный результат. Для большинства сайтов это даёт больше пользы, чем максимальный список семейств.

Adobe Fonts, редакторы и конструкторы: где искать добавленное семейство

Yabe Webfont поддерживает не только локальные Google Fonts и custom fonts, но и Adobe Fonts. Документация описывает путь через Project ID: скопировать идентификатор проекта в Adobe Fonts, открыть Appearance - Yabe Webfont, перейти на вкладку Settings, вставить идентификатор в поле Adobe Fonts - Project ID и нажать Sync. После успешной синхронизации семейства должны появиться в списке шрифтов.

Здесь важно разделить два типа подключения. Google Fonts и собственные файлы могут размещаться локально. Adobe Fonts, по официальной документации Yabe Webfont, не предоставляет такой же локальный хостинг файлов через плагин, поэтому речь идёт об удобном встраивании и синхронизации проекта. Если ваша задача именно локальное хранение всех файлов ради приватности, Adobe Fonts нужно оценивать отдельно.

Блочный редактор и Site Editor

В Gutenberg добавленные в плагин семейства можно использовать в настройках блока. Обычно пользователь выбирает блок, открывает правую панель, включает инструмент Font Family в группе типографики и выбирает нужное семейство. В Site Editor путь похожий, но применяется к стилям: открыть панель стилей, перейти в типографику и выбрать элемент, для которого назначается шрифт.

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

Elementor, Bricks, Oxygen и другие визуальные инструменты

В документации по Elementor указано, что семейства появляются в списке Family внутри панели типографики, а также могут использоваться в Theme Styles и Design System. В Bricks и Oxygen путь похож по смыслу: выбрать текстовый элемент, открыть типографику и найти семейство в группе Yabe Webfont или соответствующем списке.

Разработчик также указывает, что для поддерживаемых интеграций плагин может программно отключать встроенную загрузку Google Fonts в конструкторах. Однако changelog показывает, что поведение интеграций менялось: добавлялись opt-out-настройки, исправлялись конкретные версии конструкторов, обновлялись правила совместимости. Поэтому на рабочих сайтах не полагайтесь на общее обещание. Проверяйте конкретный редактор, версию и итоговые сетевые запросы.

Практическая проверка: если шрифт выбран в Elementor или Bricks, но в коде страницы всё ещё есть запросы к Google Fonts, ищите второй источник подключения: глобальные стили темы, настройки конструктора, сторонний блок, CSS плагина кеширования или старый код в дочерней теме.

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

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

Статус публикации и порядок изменения

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

Такой порядок даёт простой откат: вернуть старое семейство в настройках темы или редактора, а не удалять файлы и восстанавливать их из резервной копии. Удаление шрифта оставьте на последний этап, когда убедитесь, что ни один шаблон, блок или CSS-класс больше его не использует.

Font Display и поведение текста

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

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

Fallback Font и соответствие метрик

Запасной шрифт нужен не только "на случай ошибки". Он определяет, как будет выглядеть текст до загрузки основного файла и что увидит пользователь, если файл недоступен. Для гротесков обычно подходят sans-serif или системные семейства, для антикв - serif. Если дизайн чувствителен к ширине букв, проверьте несколько типовых заголовков и кнопок.

В поле селектора и fallback не стоит назначать один шрифт на всё без проверки. Для текстовых страниц можно использовать основной шрифт в body, а для заголовков - отдельный селектор. Если работаете через редактор или конструктор, лучше назначать семейства там, где интерфейс поддерживает глобальные стили: так меньше риск получить конфликт CSS.

Проверка отключения старых Google Fonts

Если ваша цель - уйти от внешней загрузки Google Fonts, настройка не завершена, пока вы не проверили сетевые запросы. Откройте опубликованную страницу, включите вкладку Network, очистите кеш браузера, обновите страницу и отфильтруйте по словам fonts, gstatic, googleapis. Затем проверьте исходный код на старые link и @import.

Если внешние запросы остались, не удаляйте Yabe Webfont. Сначала найдите источник. Это может быть тема, старый код в дочерней теме, глобальный стиль конструктора, плагин формы, слайдер или блок, который подключает шрифт независимо от основной типографики. В новых версиях Yabe Webfont появлялись настройки для opt-out поведения в конструкторах, поэтому не исключено, что часть отключений зависит от вашего набора интеграций.

Практический пример: перевод страницы с Google Fonts на локальный шрифт

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

Цель

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

Подготовка

• Сделайте резервную копию или работайте на staging-копии сайта.
• Выберите одно семейство и 2-3 веса, которые реально используются в макете.
• Запишите текущие источники шрифтов через вкладку Network.
• Очистите кеш плагина оптимизации, если он уже включён.

Шаги настройки

1. Откройте Appearance - Yabe Webfont и нажмите Import Google Fonts.
2. Найдите нужное семейство по названию. Если требуется категория, используйте поиск по подсказкам документации, например через префикс категории, когда он доступен в вашей версии.
3. Выберите подмножество, которое покрывает язык сайта. Для русскоязычного сайта проверьте кириллицу; для многоязычного проекта не забудьте нужные латинские расширения.
4. Оставьте WOFF2 как основной формат, если нет отдельной причины добавлять дополнительные форматы.
5. Выберите только нужные варианты: например 400, 600 и 700.
6. Опубликуйте семейство через Status и нажмите Save.
7. Откройте тестовую страницу в редакторе, выберите заголовок и назначьте новое семейство в панели типографики.
8. Назначьте основной текст через глобальные стили темы, Site Editor или настройки конструктора, а не через разрозненные ручные стили в каждом блоке.

Проверка результата

Откройте опубликованную страницу в приватном окне. В инструментах браузера выберите заголовок и посмотрите Computed - font-family. Затем во вкладке Network проверьте, что файлы шрифта отдаются с вашего домена. Если видите запрос к fonts.googleapis.com или fonts.gstatic.com, значит старое подключение ещё активно.

Нюанс, который часто мешает

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

Как применять шрифты через CSS-переменные и когда это оправдано

Документация для разработчиков показывает два полезных механизма: получить список шрифтов через функцию \Yabe\Webfont\Utils\Font::get_fonts() и получить CSS-переменную через \Yabe\Webfont\Utils\Font::css_custom_property(). На обычном сайте без разработки чаще достаточно редактора, но для темы, дочерней темы или пользовательского блока CSS-переменные дают аккуратный способ не дублировать полное имя семейства.

Для каждого семейства плагин формирует переменную вида --ywf--family-{font-slug}. Её можно использовать в CSS как var(--ywf--family-name). Это удобно, когда нужно оформить только конкретную секцию, карточку или заголовки лендинга, сохранив источник значения в Yabe Webfont.

Безопасный CSS-пример для отдельного блока

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

.brand-intro,
.brand-intro h2,
.brand-intro .wp-block-button__link {
  font-family: var(--ywf--family-brand-sans), sans-serif;
}

.brand-intro h2 {
  font-weight: 700;
}

Проверка простая: добавьте класс brand-intro к тестовой секции, откройте страницу и посмотрите вычисленное значение font-family. Если переменная не определена, браузер перейдёт к sans-serif. Откат тоже безопасный: удалите класс у секции или уберите CSS-правило.

Не стоит использовать PHP-функции плагина в статье или виджете, если вы не разрабатываете тему или плагин. Для контентной задачи хватит редактора и CSS-переменной. Если нужен программный список шрифтов, используйте пример из документации в коде темы, а не в редакторе записей.

Проверка результата: скорость, приватность, визуальная стабильность

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

Проверка сетевых запросов

Откройте публичную страницу, включите инструменты разработчика и вкладку Network. Обновите страницу с отключённым кешем браузера. Фильтруйте по woff, woff2, font, google. Хороший результат для локального сценария - файлы шрифтов идут с вашего домена, а старые внешние запросы к Google Fonts отсутствуют, если они не нужны другим инструментам.

Проверка визуальной стабильности

Включите замедленную сеть и обновите страницу. Смотрите не на цифры в отчёте, а на поведение текста: появляется ли он сразу, меняется ли ширина заголовков, прыгают ли кнопки, смещается ли меню. Если скачок заметен, попробуйте ближе подобрать fallback, сократить число вариантов или изменить стратегию Font Display.

Проверка редакторского опыта

Откройте тот редактор, где команда реально работает: Gutenberg, Site Editor, Elementor, Bricks, Oxygen или другой. Проверьте, что семейство появляется в списке, применяет правильный вес и сохраняется после обновления страницы. Если редактор видит семейство, но публичная страница нет, проблема чаще в кешировании или конфликте CSS. Если редактор не видит семейство, проблема может быть в интеграции или в том, что функция доступна не в вашей версии.

Полезное видео по локальным шрифтам и Yabe Webfont

В документации и readme проекта указаны ролики, посвящённые локальным шрифтам в WordPress и работе с Yabe Webfont. Для пользователя, который хочет увидеть интерфейс в движении, полезнее начать с видео про ручной и плагинный способ локального подключения: оно закрывает intent "как пользоваться Yabe Webfont" и помогает сопоставить текстовые шаги с реальным процессом.

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

Короткая памятка перед переносом на рабочий сайт

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

После этого очистите кеш страницы, CSS-оптимизатора и браузера, откройте страницу в приватном окне и проверьте три вещи: вычисленное значение font-family, сетевые запросы к файлам шрифта и визуальное поведение текста при замедленной сети. Если всё стабильно, переносите настройку в глобальные стили темы или конструктора. Если хотя бы один пункт вызывает сомнение, лучше оставить изменение на тестовой странице и исправить причину до массового применения.

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

Когда Yabe Webfont будет удачным выбором

Yabe Webfont стоит использовать, если вам нужен понятный центр управления шрифтами в WordPress: локальный Google Fonts, загрузка собственных файлов, Adobe Fonts через проект, выбор семейств в редакторах и конструкторах, а также проверяемая схема "настройка - результат". Сильная сторона плагина - не одно отдельное поле, а связка интерфейса, интеграций и практического контроля над типографикой.

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

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