1. Подготовка файлов шрифта
Форматы шрифтов (рекомендуется иметь все 4 формата для кроссбраузерной совместимости):
· .woff2 (современный, самый легкий)
· .woff (стандарт)
· .ttf (TrueType)
· .eot (для старых IE)
Подготовьте файлы:
1. Поместите файлы шрифтов в подходящую папку, например:
Или в папку вашей темы:
2. Загрузка файлов на сервер
Способ A: Через FTP/SFTP
1. Создайте папку fonts внутри:
· Либо в корне вашей установки XenForo
· Либо в папке вашей темы: styles/your_theme/fonts/
Способ B: Через менеджер файлов хостинга
· Используйте файловый менеджер вашего хостинг-провайдера
3. Добавление CSS для подключения шрифта
Вариант 1: Через extra.less (рекомендуется)
1. В админ-панели перейдите: Внешний вид → Стили → Ваш стиль
2. Нажмите кнопку «Редактировать шаблоны»
3. Найдите и откройте шаблон extra.less
4. Добавьте код:
Вариант 2: Создание нового шаблона CSS
1. В админ-панели: Внешний вид → Стили → Ваш стиль
2. Нажмите кнопку «Создать шаблон»
3. Имя шаблона: custom_fonts.less
4. Добавьте код как выше и сохраните
4. Применение шрифта к элементам
В том же extra.less добавьте:
5. Настройка через Style Properties (альтернативный способ)
1. В админ-панели: Внешний вид → Стили → Ваш стиль
2. Нажмите Style properties
3. Найдите Палитры цветов и шрифтов (Color palettes)
4. Нажмите Основной шрифт (Primary font)
5. В поле Font family добавьте:
6. Сохраните изменения
6. Очистка кеша
После всех изменений обязательно:
1. Перейдите в админ-панели: Инструменты → Очистка кеша
2. Нажмите «Очистить кеш»
3. Очистите кеш браузера (Ctrl+F5)
7. Проверка установки
1. Откройте ваш форум в браузере
2. Используйте инструменты разработчика (F12):
· На вкладке Elements проверьте, применяется ли ваш шрифт
· На вкладке Network убедитесь, что файлы шрифтов загружаются без ошибок
· На вкладке Console проверьте отсутствие ошибок загрузки шрифтов
Решение распространенных проблем
Проблема: Шрифт не загружается
Решение:
· Проверьте правильность пути к файлам
· Убедитесь, что файлы загружены в нужную папку
· Проверьте права доступа к файлам (обычно 644)
Проблема: Шрифт не применяется
Решение:
· Убедитесь, что CSS-правила не переопределяются другими стилями
· Используйте !important если необходимо:
· Проверьте правильность имени шрифта в font-family
Проблема: Искаженное отображение шрифта
Решение:
· Убедитесь, что шрифт поддерживает кириллицу (если используется русский язык)
· Проверьте наличие всех необходимых начертаний
Оптимизация производительности
1. Используйте только формат WOFF2 для современных браузеров
2. Ограничьте количество подключаемых начертаний
3. Используйте font-display: swap для избежания FOIT (Flash of Invisible Text)
Важные замечания
· Лицензия шрифта: Убедитесь, что у вас есть права на использование шрифта на сайте
· Резервные шрифты: Всегда указывайте резервные шрифты (Arial, sans-serif)
· Тестирование: Проверьте отображение на разных устройствах и браузерах
· Бэкап: Перед внесением изменений создайте резервную копию стилей
Этот гайд подходит для XenForo 2.3.7 и более поздних версий. Процесс установки может незначительно отличаться в зависимости от используемой темы и дополнительных плагинов.
Форматы шрифтов (рекомендуется иметь все 4 формата для кроссбраузерной совместимости):
· .woff2 (современный, самый легкий)
· .woff (стандарт)
· .ttf (TrueType)
· .eot (для старых IE)
Подготовьте файлы:
1. Поместите файлы шрифтов в подходящую папку, например:
Или в папку вашей темы:
2. Загрузка файлов на сервер
Способ A: Через FTP/SFTP
1. Создайте папку fonts внутри:
· Либо в корне вашей установки XenForo
· Либо в папке вашей темы: styles/your_theme/fonts/
Способ B: Через менеджер файлов хостинга
· Используйте файловый менеджер вашего хостинг-провайдера
3. Добавление CSS для подключения шрифта
Вариант 1: Через extra.less (рекомендуется)
1. В админ-панели перейдите: Внешний вид → Стили → Ваш стиль
2. Нажмите кнопку «Редактировать шаблоны»
3. Найдите и откройте шаблон extra.less
4. Добавьте код:
CSS:
/* Подключение пользовательского шрифта */
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/yourfont.woff2') format('woff2'),
url('fonts/yourfont.woff') format('woff'),
url('fonts/yourfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* Для жирного начертания (если есть) */
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/yourfont-bold.woff2') format('woff2'),
url('fonts/yourfont-bold.woff') format('woff'),
url('fonts/yourfont-bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}
/* Для курсива (если есть) */
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/yourfont-italic.woff2') format('woff2'),
url('fonts/yourfont-italic.woff') format('woff'),
url('fonts/yourfont-italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
font-display: swap;
}Вариант 2: Создание нового шаблона CSS
1. В админ-панели: Внешний вид → Стили → Ваш стиль
2. Нажмите кнопку «Создать шаблон»
3. Имя шаблона: custom_fonts.less
4. Добавьте код как выше и сохраните
4. Применение шрифта к элементам
В том же extra.less добавьте:
CSS:
/* Применение к основному тексту */
body {
font-family: 'MyCustomFont', Arial, sans-serif;
}
/* Или только к определенным элементам */
.m-pageContent {
font-family: 'MyCustomFont', Arial, sans-serif;
}
/* Для заголовков */
h1, h2, h3, h4, h5, h6,
.block-header,
.node-title,
.node .node-title,
.structItem-title {
font-family: 'MyCustomFont', Arial, sans-serif;
}5. Настройка через Style Properties (альтернативный способ)
1. В админ-панели: Внешний вид → Стили → Ваш стиль
2. Нажмите Style properties
3. Найдите Палитры цветов и шрифтов (Color palettes)
4. Нажмите Основной шрифт (Primary font)
5. В поле Font family добавьте:
6. Сохраните изменения
6. Очистка кеша
После всех изменений обязательно:
1. Перейдите в админ-панели: Инструменты → Очистка кеша
2. Нажмите «Очистить кеш»
3. Очистите кеш браузера (Ctrl+F5)
7. Проверка установки
1. Откройте ваш форум в браузере
2. Используйте инструменты разработчика (F12):
· На вкладке Elements проверьте, применяется ли ваш шрифт
· На вкладке Network убедитесь, что файлы шрифтов загружаются без ошибок
· На вкладке Console проверьте отсутствие ошибок загрузки шрифтов
Решение распространенных проблем
Проблема: Шрифт не загружается
Решение:
· Проверьте правильность пути к файлам
· Убедитесь, что файлы загружены в нужную папку
· Проверьте права доступа к файлам (обычно 644)
Проблема: Шрифт не применяется
Решение:
· Убедитесь, что CSS-правила не переопределяются другими стилями
· Используйте !important если необходимо:
CSS:
body {
font-family: 'MyCustomFont', Arial, sans-serif !important;
}· Проверьте правильность имени шрифта в font-family
Проблема: Искаженное отображение шрифта
Решение:
· Убедитесь, что шрифт поддерживает кириллицу (если используется русский язык)
· Проверьте наличие всех необходимых начертаний
Оптимизация производительности
1. Используйте только формат WOFF2 для современных браузеров
2. Ограничьте количество подключаемых начертаний
3. Используйте font-display: swap для избежания FOIT (Flash of Invisible Text)
Важные замечания
· Лицензия шрифта: Убедитесь, что у вас есть права на использование шрифта на сайте
· Резервные шрифты: Всегда указывайте резервные шрифты (Arial, sans-serif)
· Тестирование: Проверьте отображение на разных устройствах и браузерах
· Бэкап: Перед внесением изменений создайте резервную копию стилей
Этот гайд подходит для XenForo 2.3.7 и более поздних версий. Процесс установки может незначительно отличаться в зависимости от используемой темы и дополнительных плагинов.
