В этой уникальной статье мы пошагово расскажем, как подключить любой пользовательский шрифт на сайт под управлением CMS Joomla. Вы узнаете 4 проверенных способа — от простого редактирования template.css до подключения через API Joomla и специальных расширений для новичков. Мы разберём, какие форматы шрифтов (WOFF2, WOFF, TTF) лучше использовать, как избежать типичных ошибок с путями и кэшированием, а также как сделать так, чтобы шрифт красиво отображался на всех устройствах — от десктопов до мобильных телефонов.
Содержание
- Зачем менять стандартные шрифты?
- Подготовка: форматы файлов и расположение
- Способ 1 — через @font-face в файле шаблона (основной)
- Способ 2 — подключение через Joomla API (для разработчиков)
- Способ 3 — использование расширений (для новичков)
- Способ 4 — Google Fonts (быстрый, но внешний)
- Решение типичных проблем
- Промты для генерации уникальных иллюстраций
- Заключение
1. Зачем менять стандартные шрифты?
Стандартные системные шрифты (Arial, Times New Roman, Verdana) выглядят скучно и не передают индивидуальность бренда. Свой шрифт позволяет:
- усилить узнаваемость компании;
- улучшить читаемость на разных устройствах;
- создать уникальный дизайн без лишних графических элементов.
Joomla не накладывает ограничений — вы можете использовать любые шрифты, совместимые с вебом (WOFF2, WOFF, TTF, OTF, EOT).
2. Подготовка: формат файлов и расположение
Прежде чем писать код, убедитесь, что у вас есть:
- Шрифтовые файлы минимум в форматах .woff2
(современный, сжатый) и .woff
(широкая поддержка). Для старых браузеров можно добавить .ttf. - Папка на сервере – создайте внутри папки вашего шаблона каталог, например, /templates/ваш_шаблон/fonts/ . Положите туда все файлы шрифта.
Пример структуры:
/templates/sj_novel/
├── css/
│ └── template.css
├── fonts/
│ ├── MyFont-Regular.woff2
│ ├── MyFont-Regular.woff
│ ├── MyFont-Bold.woff2
│ └── MyFont-Bold.woff
└── index.php
3. Способ 1 — через @font-face в файле шаблона (основной)
Этот метод не требует правки index.php и подходит для любых шаблонов.
Шаг 1. Откройте файл template.css
Обычно он находится по пути: /templates/ваш_шаблон/css/template.css
Шаг 2. Пропишите правило @font-face в самом начале файла
/* Подключение пользовательского шрифта */
@font-face {
font-family: 'MyCustomFont';
src: url('../fonts/MyFont-Regular.woff2') format('woff2'),
url('../fonts/MyFont-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap; /* улучшает производительность загрузки */
}
@font-face {
font-family: 'MyCustomFont';
src: url('../fonts/MyFont-Bold.woff2') format('woff2'),
url('../fonts/MyFont-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}Обратите внимание на путь '../fonts/' – он поднимается на уровень выше от папки css . Если ваш template.css лежит в корне шаблона, путь будет 'fonts/'
.
Шаг 3. Примените шрифт к нужным элементам
body {
font-family: 'MyCustomFont', sans-serif;
}
h1, h2, h3 {
font-family: 'MyCustomFont', sans-serif;
font-weight: bold;
}Шаг 4. Очистите кэш Joomla
- Перейдите в админ-панели в Система → Очистить кэш.
- Удалите все файлы кэша (кнопка «Удалить все»).
- Обновите страницу сайта с помощью Ctrl+F5
4. Способ 2 — подключение через Joomla API (для разработчиков)
Этот метод предпочтителен, если вы создаёте собственный шаблон или хотите динамически подключать стили через PHP.
Шаг 1. Откройте index.php вашего шаблона
Файл находится в /templates/ваш_шаблон/index.php
Шаг 2. Добавьте код до вывода тега <head>
<?php
$document = JFactory::getDocument();
$document->addStyleSheet(JUri::root(true) . '/templates/' . $this->template . '/css/custom-font.css');
?>Шаг 3. Создайте custom-font.css
Положите его в /templates/ваш_шаблон/css/custom-font.css
со следующим содержимым:
@font-face {
font-family: 'MyCustomFont';
src: url('../fonts/MyFont-Regular.woff2') format('woff2'),
url('../fonts/MyFont-Regular.woff') format('woff');
font-weight: normal;
}Шаг 4. Примените шрифт в основном CSS или прямо в этом же файле
body {
font-family: 'MyCustomFont', sans-serif;
}
5. Способ 3 — использование расширений (для новичков)
Если вы не хотите редактировать код, установите бесплатное расширение «Custom CSS/JS» или «Font Changer» из официального каталога Joomla Extensions.
Пример работы с расширением «Custom CSS/JS»:
- Установите и активируйте плагин.
- В настройках плагина перейдите на вкладку «Custom CSS».
- Вставьте туда весь блок @font-face и правило для body.
- Сохраните.
6. Способ 4 — Google Fonts (быстрый, но внешний)
Если ваш шрифт есть в библиотеке Google Fonts, подключать его ещё проще. Но помните: это внешний ресурс, и работа сайта зависит от доступности серверов Google.
Шаг 1. В index.php или через API
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">Шаг 2. В template.css
body {
font-family: 'Roboto', sans-serif;
}7. Решение типичных проблем
| Проблема | Решение |
|---|---|
| Шрифт не отображается, вместо него стандартный | Проверьте путь к файлам в @font-face. Откройте инструменты разработчика (F12) → вкладка Network → найдите файл .woff2. Если 404 — путь неверен. |
| Шрифт меняется только после полной перезагрузки | Очистите кэш Joomla и кэш браузера (Ctrl+F5). |
| На мобильных устройствах шрифт «прыгает» | Убедитесь, что прописан font-display: swap;. |
| Шрифт выглядит жирнее или тоньше, чем нужно | Убедитесь, что в @font-face указан точный font-weight, и в CSS вы используете соответствующее значение (например, font-weight: 500). |
8. Заключение
Теперь вы знаете 4 рабочих способа подключения своего шрифта на Joomla. Самый надёжный и производительный — через @font-face в template.css. Для ленивых подойдут плагины, а для быстрых прототипов — Google Fonts.
Не забывайте про форматы WOFF2 и WOFF, указывайте корректные пути и очищайте кэш. Если что-то пошло не так — откройте консоль браузера (F12) и проверьте, грузятся ли файлы шрифта.
Желаем Вам красивых и быстрых сайтов на Joomla!
