Локальные шрифты в Joomla: как добавлять и применять?

Шрифты на сайте Joomla могут загружаться не только вместе с шаблоном, но и с внешних сервисов. Один из самых распространённых вариантов — Google Fonts: шаблон или расширение подключает таблицу стилей с fonts.googleapis.com, после чего браузер получает сами файлы шрифтов с серверов Google.

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

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

Как работает Local Fonts

После установки расширения в административной панели появляется компонент Локальные шрифты. В нём хранится список семейств шрифтов и их параметры.

Шрифт можно добавить двумя способами:

• Google — обнаружить уже существующее подключение Google Fonts или добавить его вручную по URL;
• Локальный — загрузить собственные файлы шрифта с компьютера.

Для каждого семейства компонент хранит состояние подключения, тип, начертания, способ добавления и дату. Несколько файлов одного семейства — например Regular, Bold и Italic — объединяются в одну запись, а не отображаются как отдельные шрифты.

Установка и подготовка

Local Fonts устанавливается обычным способом через менеджер расширений Joomla. Установочный пакет содержит компонент и системный плагин.

После установки откройте Компоненты → Локальные шрифты. Также проверьте, что системный плагин Система - Local Fonts включён. Именно он отвечает за обработку страниц сайта и подключение локальных ресурсов.

Сам плагин практически не требует управления: основные параметры находятся в компоненте. Поэтому настройка шрифтов выполняется в одном месте.

Как автоматически найти Google Fonts на сайте

Если шаблон или стороннее расширение уже подключает Google Fonts, вручную искать URL необязательно. Local Fonts может обнаружить такие подключения при сканировании сайта.

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

Компонент анализирует подключения Google Fonts в HTML и локальных CSS-файлах. Найденные семейства появляются в общем списке с пометкой Автоматически.

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

Как настроить обнаруженный Google Font

Нажмите на название семейства в колонке Шрифт. Откроется окно его параметров.

Для Google Font можно отдельно выбрать:

• наборы символов;
• font-style;
• font-weight;
• font-display.

Наборы символов

Google Fonts нередко отдаёт отдельные файлы для разных наборов Unicode: например latin, latin-ext, cyrillic и cyrillic-ext.

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

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

Начертания и толщина

В font-style выбираются обычное, курсивное или наклонное начертания. В font-weight — нужные толщины.

В интерфейсе рядом с числовым значением показывается привычное название:

• 100 — Thin;
• 200 — Extra Light;
• 300 — Light;
• 400 — Regular;
• 500 — Medium;
• 600 — Semi Bold;
• 700 — Bold;
• 800 — Extra Bold;
• 900 — Black.

Не стоит локализовывать все варианты только «на всякий случай». Если дизайн сайта использует 400, 500 и 700, достаточно сохранить именно их.

Как добавить Google Font вручную

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

Нажмите Добавить → Шрифт Google и укажите URL таблицы стилей Google Fonts. Например:

https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap

После этого выберите необходимые наборы символов, стили, толщины и значение font-display.

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

Как добавить собственный локальный шрифт

Local Fonts можно использовать и без Google Fonts. Если у вас есть файлы шрифта, нажмите Добавить → Локальный шрифт.

Поддерживаются форматы:

• WOFF2;
• WOFF;
• TTF;
• OTF.

Для сайта предпочтительнее WOFF2: этот формат предназначен для веб-шрифтов и обычно обеспечивает меньший размер файла.

Одно семейство — несколько файлов

Regular, Medium, Bold и Italic одного шрифта не нужно добавлять как разные семейства. Правильнее создать одно семейство и добавить в него несколько вариантов.

Например, для семейства Inter можно загрузить:

• Inter-Regular.woff2 — font-style: normal, font-weight: 400;
• Inter-Medium.woff2 — font-style: normal, font-weight: 500;
• Inter-Bold.woff2 — font-style: normal, font-weight: 700;
• Inter-Italic.woff2 — font-style: italic, font-weight: 400.

В окне редактирования используется повторяемое поле Joomla. Кнопкой + добавляется новый вариант, после чего для него выбираются файл, начертание, толщина и font-display.

Файлы также можно перетаскивать в область загрузки.

Вариативные шрифты

Если используется variable font, один файл может содержать сразу диапазон толщин. Для такого файла можно указать минимальное и максимальное значение, например от 100 до 900.

Указывать диапазон нужно в соответствии с возможностями самого файла: настройка в Local Fonts не превращает обычный статический шрифт в вариативный.

Что делает font-display

Параметр font-display определяет, как браузер показывает текст, пока файл шрифта ещё загружается.

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

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

Как применить локальный шрифт на сайте

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

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

Если Google Font уже использовался шаблоном и после локализации сохранилось прежнее название font-family, дополнительные изменения часто вообще не нужны. Шаблон продолжит использовать то же семейство, но файлы будут загружаться локально.

Для собственного шрифта его нужно назначить в настройках шаблона или в CSS. Например:

body {
    font-family: "Inter", Arial, sans-serif;
}

Для заголовков можно использовать отдельное семейство:

h1,
h2,
h3 {
    font-family: "Roboto Slab", serif;
}

Название в CSS должно совпадать со значением font-family, указанным в Local Fonts.

Как включать и отключать шрифты

В колонке Состояние отображается, применяется ли семейство сейчас. Состояние можно изменить кликом по стандартной иконке Joomla или через меню Действия.

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

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

Настройки Local Fonts

Основные параметры находятся на стандартной странице настроек компонента Joomla.

Показывать в меню

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

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

Автоматическое обнаружение Google Fonts

При включённой настройке системный плагин может фиксировать Google Fonts, которые встречаются в HTML и CSS сайта.

Срок кэша

Определяет, через сколько дней допускается повторная проверка локальной копии Google Fonts.

Истечение срока не означает удаление сохранённого шрифта. Уже загруженная локальная версия продолжает работать, даже если исходное подключение Google больше не присутствует на странице.

Удалять подсказки соединения Google

После локализации обращения к Google Fonts становятся ненужными. Эта настройка позволяет убрать из HTML такие подсказки браузеру, как preconnect и dns-prefetch для серверов Google Fonts.

Внешний fallback

Если включить внешний fallback, при невозможности использовать локальную копию браузеру разрешается обратиться к исходному ресурсу Google.

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

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

После настройки откройте сайт и инструменты разработчика браузера. На вкладке Network перезагрузите страницу и проверьте запросы.

При полностью локализованном Google Font не должно быть обращений к:

fonts.googleapis.com
fonts.gstatic.com

Файлы шрифта должны загружаться с вашего домена.

Дополнительно можно открыть вкладку Computed или раздел Fonts в инструментах разработчика и проверить, какое семейство фактически используется выбранным элементом страницы.

Что делать после изменения шаблона

После обновления или смены шаблона набор подключаемых шрифтов может измениться. В этом случае откройте Local Fonts и запустите Пересканировать.

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

Видеоинструкция

Итоги

Local Fonts отделяет управление шрифтами от конкретного шаблона Joomla. Google Fonts можно обнаружить и сохранить локально, а собственные файлы — объединить в семейства с несколькими начертаниями и толщинами.

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