Фирменные шрифты в Joomla: подключение и настройка

Шрифты — это голос бренда. Они влияют на восприятие компании и читабельность текста. Мы настраивали фирменную типографику на более чем 70 сайтах Joomla и знаем: правильно подобранные шрифты делают сайт профессиональным, неправильные — создают ощущение «сделанного на коленке». Разберём, как подключить фирменные шрифты и настроить их правильно.

Откуда брать шрифты

Источники шрифтов:

• Google Fonts — бесплатные, огромный выбор, лёгкое подключение.
• Adobe Fonts — по подписке, качественная библиотека.
• Локальные файлы — свои шрифты из брендбука.
• Файлы из брендбука — если шрифт фирменный, обычно с лицензией.

Выбор зависит от того, что есть в брендбуке и от бюджета. Если фирменный шрифт есть — используйте его. Если нет — Google Fonts с лицензией OFL (Open Font License) — безопасный вариант.

Подключение Google Fonts

Через настройки шаблона:

1. Откройте «Система» → «Стили шаблонов».
2. Найдите вкладку с настройками шрифтов.
3. Выберите шрифт из списка или введите код подключения.
4. Укажите, где использовать — заголовки или текст.
5. Сохраните изменения.

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

Локальные шрифты

Загрузка своих шрифтов на сервер:

1. Скачайте файлы шрифтов (форматы WOFF2, WOFF — современные, TTF — для старых браузеров).
2. Загрузите их в папку шаблона (например, /templates/your_template/fonts/).
3. Добавьте подключение через @font-face в CSS.
4. Примените шрифт к нужным элементам.

Локальные шрифты работают без внешних сервисов — быстрее и надёжнее. Особенно важно для фирменных шрифтов из брендбука.

Что настроить в типографике

Основные параметры:

• Шрифт заголовков — для H1–H6.
• Шрифт текста — для основного контента.
• Размеры — для каждого уровня заголовков и текста.
• Межстрочный интервал — обычно 1.4–1.6 для текста.
• Начертания — regular, bold, italic, light.
• Цвета текста — основной, вторичный, для ссылок.

Не настраивайте всё сразу. Начните с базового: шрифты и размеры. Интервалы и начертания — вторым этапом.

Шрифт заголовков

Заголовки должны быть:

• Заметными — крупнее текста в 1.5–2 раза.
• Соответствовать бренду — характер шрифта = характер компании.
• Читабельными — даже декоративные шрифты должны читаться.
• Контрастными — выделяться на фоне.

Заголовки создают иерархию и помогают сканировать страницу. Обычно это один шрифт для H1–H3 и другой (или тот же) для H4–H6.

Шрифт основного текста

Текст должен быть:

• Читабельным — без засечек или с умеренными засечками.
• Достаточного размера — 16–18px для основного текста.
• С хорошим интервалом — 1.5–1.6 line-height.
• Комфортным для чтения — не слишком тонкий, не слишком жирный.

Удобство чтения — приоритет. Даже красивый шрифт, если его тяжело читать, вредит конверсии.

Оптимальные размеры шрифтов

Стандартные размеры для сайта:

• Заголовок H1 — 28–36px.
• Заголовки H2 — 24–28px.
• Заголовки H3 — 20–24px.
• Основной текст — 16–18px.
• Мелкий текст — 13–14px (подписи, сноски).

Размеры влияют на восприятие: крупный текст легко читается, но выглядит просто; мелкий — утончённо, но неудобен.

Проверка типографики

После настройки проверьте:

• Шрифты загружаются без ошибок.
• Текст читается легко, не напрягая глаза.
• Иерархия заголовков соблюдена (H1 > H2 > H3).
• Мобильная версия — шрифты корректны.
• Разные браузеры — шрифты отображаются одинаково.
• Скорость загрузки — шрифты не тормозят сайт.

Проверка гарантирует качество. Шрифты — невидимый инструмент, но их влияние огромно.

«Шрифты — это невидимый инструмент, который формирует отношение к бренду. Хорошая типографика не замечается, плохая — бросается в глаза».

Когда нужен специалист

Обратитесь к профессионалу, если:

• Нужно подключить нестандартный фирменный шрифт.
• Шаблон не поддерживает визуальные настройки шрифтов.
• Требуется единая типографика на многостраничном сайте.
• Не хватает времени на настройку.
• Шрифты тормозят сайт — нужна оптимизация.

Специалист сделает типографику профессиональной. Это входит в услугу Адаптация под бренд. Если нужна оптимизация скорости — смотрите Оптимизация скорости.

Коротко: что запомнить

• Не больше 2 шрифтов: для заголовков и текста.
• Google Fonts — просто, локальные — быстрее.
• Размеры: H1 — 28–36px, текст — 16–18px.
• Межстрочный интервал — 1.5–1.6 для текста.
• Шрифт заголовков — заметный, текст — читабельный.
• Проверяйте на мобильных и разных браузерах.

Если хотите настроить фирменные шрифты правильно — обратитесь к нам. Сделаем типографику профессиональной.