Работа с шрифтами в Joomla

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

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

Шрифт, как и дизайн страницы, формируется шаблоном, то есть в стилях шаблона, как правило, указано кокой шрифт и какого размера используется для определенного блока или группы блоков. Соответственно, если Вас интересует вопрос, как изменить шрифт в joomla? Ответ достаточно прост, необходимо открыть используемый файл стилей, найти селектор элемента, шрифт которого необходимо изменить и отредактировать правила CSS, или добавить недостающие.

Предположим, что у нас есть вот такой сайт, дизайн которого формирует стандартный шаблон Beez3.

Если необходимо изменить шрифт контента, то мы можем сделать следующее. Откроем плагин FireBug для браузера Mozilla FireFox, или любой удобный для Вас инспектор кода, и выберем интересующий элемент сайта, в нашем случае это текст материалов.

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

Если опустить ползунок скролла на вкладке “Стиль” по ниже, мы найдем определение семейства шрифтов.

Теперь мы знаем, где описаны интересующие стили, а значит, мы можем их отредактировать. Поэтому открываем файл layout.css, который располагается в папке активного шаблона по адресу \templates\beez3\css. И для начала определим семейство шрифтов (строка 13).

body#shadow {
font-family: Curier,sans-serif
}

Затем изменим размер шрифта (строка 56).

body p,body ol,body ul,body dl,body address {
margin-bottom: 1.5em;
font-size: 1.3em;
line-height: 1.8em;
}}

Сохранив изменения, мы увидим следующий результат в браузере.

Помимо этого, очень часто начинающие веб-мастера задаются вопросом, как изменить цвет шрифта на сайте джумла. Опять же, изначально цвет шрифта определен и его просто нужно отредактировать. По структуре шаблона Beez3, содержимое страницы содержится в блоке div с идентификатором #all, а значит для выбранного текста давайте найдем при помощи FireBug, стили прописанные для вышеуказанного блока.

Как Вы видите цвет, определен совсем в другом файле – personal.css на строке 38. Опять же давайте откроем данный файл и изменим CSS правила.

#all {
background: #FFFFFF;
color: #4565b8;
}

При этом мы увидим следующий результат.

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

Для начала, скачаем необходимый шрифт в формате .ttf. Для примера я скачал шрифт Argentine Bold на сайте 7fonts. Далее, распакуем полученный архив и перейдем на сайт font2web, где при помощи поля загрузки файлов, выберем только что скачанный шрифт и нажмем кнопку “Convert&Download”. Тем самым мы получим готовый архив, в котором содержится каталог fonts, со скачанным шрифтом, а так же файл стилей, с примером подключения нового шрифта.

Поэтому, каталог fonts, скопируем в корень папки активного шаблона. Далее переименуем имена файлов в данном каталоге, на более простые, к примеру Argentine-Bold.ttf, то есть уберем префикс 7fonts.ru, и открываем в текстовом редакторе файл стилей fonts.css.

/** Generated by FG **/
@font-face {
font-family: 'Conv_7fonts.ru_Argentine-Bold';
src: url('fonts/7fonts.ru_Argentine-Bold.eot');
src: local('☺'), url('fonts/7fonts.ru_Argentine-Bold.woff') format('woff'), url('fonts/7fonts.ru_Argentine-Bold.ttf') format('truetype'), url('fonts/7fonts.ru_Argentine-Bold.svg') format('svg');
font-weight: normal;
font-style: normal;
}

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

@font-face {
font-family: 'Argentine-Bold';
src: url('../fonts/Argentine-Bold.eot');
src: local('☺'), url('../fonts/Argentine-Bold.woff') format('woff'), url('../fonts/Argentine-Bold.ttf') format('truetype'), url('../fonts/Argentine-Bold.svg') format('svg');
font-weight: normal;
font-style: normal;
}
 

Теперь добавим правила в самый конец файла layouts.css, и используем новый шрифт для написания текста материалов.

body#shadow {
font-family: Argentine-Bold, sans-serif
}

После сохранения мы увидим следующий результат в браузере.

Теперь Вы знаете, применительно к CMS Joomla 3 как изменить шрифт. Если Вы желаете узнать, как устроены шаблоны данной CMS и хотите научиться на профессиональном уровне создавать собственные, Вам будет полезен наш курс Joomla-Мастер. С нуля до премиум шаблона. На этом данная статья завершена. Всего Вам доброго и удачного кодирования!!!

Комментарии Вконтакте:

Комментарии (1)

1. Boosters

   2016-11-07 в 11:22

   Спасибо за полезный урок! Шрифты должны быть в меру яркими, выразительными. Мне понравилось сочетание темно-синего с желто-салатовым на сайте boosters.com.ua Многие веб-мастера, увы, не обращают на шрифты должного внимания, а стоило бы. Всё-таки грамотно подобранные шрифты и их цвета улучшают читабельность и восприятие текстов, а следовательно — привлекательность сайта для посетителей.

   Ответить