Содержание статьи
Установите расширение, активируйте, откройте админку. Дальше – внешний вид, раздел для подключения новых начертаний. Всё управление ведётся в кастомайзере. Меню редактора – Appearance → Customize → Fonts (после установки модуля).
По умолчанию используется Noto Serif. Он мешает? Убирайте. Выбирайте Roboto, Lora, PT Sans – список зависит от подключения к Google Fonts. Все семейства шрифтов доступны через API. Локальное хранилище не требуется, но при необходимости – используйте локальный режим (через WP Local Fonts).
Важная деталь: типографика применима не ко всем элементам. Например, blockquote, pre и h6 могут игнорировать глобальные настройки. Придётся использовать дополнительный CSS.
Важно! Изменения в интерфейсе не вступят в силу, если кэш браузера или плагинов не сброшен. Очистите его вручную.
Если нужен точечный контроль, используйте следующий код в разделе \»Дополнительные стили\»:
body {
font-family: \'Inter\', sans-serif !important;
}
.site-title {
font-family: \'Bebas Neue\', cursive;
}
blockquote {
font-family: \'Merriweather\', serif;
}
Отдельное внимание – мобильной версии. Некоторые начертания отображаются некорректно на экранах до 480px. Проверяйте в инспекторе Chrome.
Видите разницу? Подменив 3–4 свойства, можно кардинально изменить ощущение от всей темы. Без использования дочерней темы. Без правки исходников. Только визуальное управление и немного CSS.
Внимание! Некоторые гарнитуры конфликтуют с кириллическими наборами. Не все стили отображаются корректно. Тестируйте каждое изменение вручную.
Поддержка ligatures, kerning и других OpenType-фишек зависит от браузера. Safari часто обрезает начертания, особенно в подзаголовках.
Не нравится результат? Откат возможен. Возврат к базовым параметрам – через Reset Fonts в настройках расширения.
Пропишите !important, если система игнорирует стили. Это частый баг в стандартной теме при активации кастомных модификаций.
Всё. Больше ничего не трогайте. Проверяйте результат на фронте. Не в админке. Только так можно оценить реальное отображение на сайте.
Установка и активация Typecase в теме Twenty Fifteen
Зайди в админ-панель WordPress. Перейди в раздел Плагины – Добавить новый. В поле поиска введи Typecase. Убедись, что автор – UpThemes. Никаких сторонних копий. Жми Установить. После завершения – Активировать.
Теперь проверь: в меню Внешний вид появился пункт Typecase. Если его нет – обнови страницу. Все еще не видно? Проверь активную тему. Поддержка не работает с кастомными сборками, если в functions.php отключены хуки after_setup_theme.
Важно помнить, Typecase подключает стили через wp_enqueue_style, а не напрямую. Если шапка темы перегружена внешними API, возможны конфликты. В таком случае проверь header.php на предмет ручного подключения Google Fonts. Удали лишнее. Доверяй Typecase – он сам всё вытащит через API.
Если панель Typecase отображается, но шрифты не применяются – это частая ошибка. Причина: конфигурация кастомайзера. Включи поддержку темы, добавив в functions.php строку:
add_theme_support(\'typecase\');
Без этой строки ничего не заработает. Это не баг – это поведение по умолчанию.
Внимание! Если ты используешь дочернюю тему, настройку нужно делать именно в ней. Не в родительской. Иначе обновления всё сотрут.
После добавления поддержки перезагрузи страницу настроек. Выбери шрифт, сохрани изменения, очисти кэш. И проверь HTML – убедись, что теги <link rel=\"stylesheet\" ...> вставлены в <head>. Нет ссылки? Тогда проверь, не перехватывает ли другой плагин хук wp_head. Это встречается чаще, чем кажется.
Никакой магии. Просто порядок действий. Поставил, активировал, добавил поддержку. Всё. Либо работает, либо не настроено.
Важно! Плагин не добавляет шрифты глобально – он регистрирует их, а ты сам решаешь, где и как применить. Не жди автоматической замены – это твоя задача.
Проверь файл стилей темы. Если использован !important – шрифт не применится. Отключи или переопредели вручную. Минимум CSS, максимум контроля.
Выбор и применение шрифтов из библиотеки Google Fonts через Typecase
Сразу выбирайте латинские и кириллические наборы отдельно. Не все гарнитуры содержат обе группы символов. Например, Roboto поддерживает обе, а Work Sans – только латиницу.
В панели Typecase активируйте нужный гарнитур. В списке выбирайте только те, где указана поддержка \»latin-ext\» или \»cyrillic\». Остальное – зря потраченное время. По умолчанию Typecase подгружает только базовую версию. Это критично.
После активации прокрутите вниз – там блок Selector. Там и начинается самое интересное. Пример: задать PT Serif для основного текста:
body {
font-family: \'PT Serif\', serif;
}
Но если хотите, чтобы заголовки отличались – подключайте второй стиль. Например, Montserrat для h1–h3:
h1, h2, h3 {
font-family: \'Montserrat\', sans-serif;
font-weight: 600;
}
Если не указать вес – шрифт может отобразиться в уродливом начертании. Typecase не загружает все варианты. Это нужно контролировать вручную в выпадающем списке \»Font Variants\». Работайте только с нужными. Например, только 400 и 700. Остальное отключите – влияет на производительность.
Важно: чем больше вариаций загружено – тем медленнее работает сайт. Удаляйте лишнее без сожалений.
Некоторые темы переопределяют стили. Придется использовать более специфичный селектор. Пример:
.entry-content p {
font-family: \'Merriweather\', serif;
}
Или так, если не срабатывает:
body .site-content .entry-content p {
font-family: \'Merriweather\', serif !important;
}
Да, придется использовать !important, хотя это костыль. Но когда ничего не работает – это спасает.
Иногда шрифт не отображается, несмотря на правильную настройку. Почему? Typecase не вставляет ссылку на Google Fonts. Проверка: откройте исходный код страницы и найдите <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/...\">. Нет её? Значит конфликт или баг. Добавьте вручную в файл functions.php:
function add_custom_fonts() {
wp_enqueue_style( \'custom-google-fonts\', \'https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\', false );
}
add_action( \'wp_enqueue_scripts\', \'add_custom_fonts\' );
Внимание! Typecase не всегда обновляет шрифты при деактивации. Очищайте кэш браузера и плагинов.
Отключайте загрузку неиспользуемых гарнитур через фильтр:
add_filter( \'typecase_exclude_fonts\', function( $fonts ) {
$fonts[] = \'Open Sans\';
return $fonts;
});
Не цепляйтесь за популярные названия. Тестируйте визуально. Слишком жирные буквы портят читабельность. Слишком тонкие – теряются на экране. Баланс – ключ. Но его нельзя найти в списке. Его нужно почувствовать.
Настройка размеров и межстрочного интервала для разных элементов темы
Абзацы должны быть в диапазоне 16–18px. Оптимальный межстрочный интервал: 1.6. Не 1.5, не 1.7 – именно 1.6. Потому что меньше – слипается. Больше – разваливается.
Важно! Не увеличивайте интерлиньяж глобально через body – он не применяется к заголовкам, и визуальный ритм рушится.
Списки. Используйте li { font-size: 1rem; line-height: 1.5; }. А теперь внимание: у ul и ol отступы часто конфликтуют с сеткой темы. Уменьшите margin-bottom вручную, если нужно – до 0.75em.
Цитаты – самый капризный элемент. Не стоит ставить им тот же размер, что и у параграфа. Лучше сделать их немного меньше: font-size: 0.95rem;, но с интервалом больше: 1.8. Это создает ощущение воздуха.
Для меток, подписей и элементов навигации можно смело применять font-size: 0.85rem;. Не играйте с интервалом – он должен быть плотным, line-height: 1.3;.
Помните! Изменяя размеры в визуальном редакторе, проверьте отображение в мобильной версии – он может игнорировать часть значений из кастомайзера.
И ещё. Если используете переменные шрифты – обязательно указывайте конкретный оптический размер в свойствах. Без этого они игнорируют часть line-height.
А теперь коротко: не доверяйте теме. Проверяйте каждый элемент вручную. Тестируйте не на демо, а на реальном тексте. Любое отклонение – и вся типографика рушится как карточный домик.