Как поменять основной шрифт сайта в opencart

Если нужно быстро разобраться, как поменять основной шрифт сайта в opencart, важно сначала понять, откуда именно тема берет стили: из настроек шаблона, файла CSS или подключения шрифтов через Google Fonts. В Opencart это обычно делается правкой файлов темы и очисткой кэша после изменений.

Сначала найдите, где задается шрифт

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

• Откройте файл стилей активной темы, обычно это catalog/view/theme/имя_темы/stylesheet/stylesheet.css или похожий файл.
• Найдите правила для body, html, p, a, button и заголовков h1–h6.
• Проверьте, не подключается ли шрифт в header.twig или в настройках самого шаблона.

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

Как заменить шрифт в CSS

Когда нужное правило найдено, замените значение font-family у базового селектора. Чаще всего основной шрифт задают для body, а заголовкам отдельно назначают более выразительное начертание.

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

Если вы хотите использовать шрифт, которого нет в системе пользователя, его нужно подключить. Для внешнего шрифта добавьте ссылку в шаблон header.twig или через файл стилей, если тема это допускает. Для локального файла шрифта укажите путь в @font-face и проверьте, что файлы лежат в нужной папке.

• Для базового текста задайте запасной вариант: sans-serif, serif или monospace.
• Не смешивайте слишком много шрифтов на одной странице.
• Если меняете только основной текст, заголовки лучше проверить отдельно.

Если шрифт не меняется

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

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

• Очистить кэш модификаторов и кэш шаблона в админке;
• Сделать hard refresh в браузере;
• Посмотреть через инструменты разработчика, какое правило font-family реально применяется;
• Убедиться, что правится именно активная тема, а не папка старого шаблона.

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

Как проверить итог

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

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

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