Меню

Как подключить шрифты к сайту joomla

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

С использованием стандартных шрифтов проблем, как правило, не возникает. Все что необходимо сделать, это задать определенное CSS свойство:

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

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

Все что от нас потребуется это скачать нужный шрифт с одного из множества сайтов, с поиском в Яндексе думаю, проблем нет ни у кого. Но тут есть одно правило, шрифт обязательно должен быть в формате TTF или OTF. Я в качестве примера выбрал шрифт Noteworthy Light (достаточно оригинальный шрифт).
После того как шрифт скачали, переходим на сайт www.font2web.com и жмем на кнопку «Выберите файл»:

Указываем место расположения нашего шрифта, после чего жмем на кнопку «Convert & Download». На этом полдела можно считать сделанным, ждем окончания загрузки архива с нашим шрифтом. Его содержимое будет примерно следующим:

Как только архив загрузится, открываем его и копируем содержимое папки fonts в одноименную папку Вашего шаблона (имя_сайта/templates/имя_шаблона/fonts):

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

Все что от нас потребуется это немного подправить пути до файлов шрифта и привести код к такому виду:

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

Осталось только применить наш новый шрифт к элементам на сайте, например для заголовков:

Параметр important устанавливается в том случае, когда другой css файл уже содержит подобные свойства для данного элемента, но они нам не нужны и есть желание их переопределить (в моем случае именно так и произошло). Результат проделанных манипуляций следующий:

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

Читайте также:  Как подключить мобилу к стиму

Источник

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

Дата публикации: 2016-10-20

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

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

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

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

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

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

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

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

Источник

Добавление иконочных шрифтов на сайт Joomla

Несколько лет назад я писал статью Добавление иконок пунктам меню Joomla. Простой и хороший способы. Тогда мы рассматривали возможности вставки иконок на сайт под управлением Joomla c помощью простых изображений и спрайтов. Каждый из способов имел свои достоинства и недостатки. Тогда я назвал эти способы «Простой» и «Хороший». В этой статье я расскажу про «Отличный» способ добавления иконок на сайт, который позволит существенно сократить время загрузки страниц с иконками, а также даст вам над ними тотальный контроль.

Что такое «иконка»?

Давайте вспомним, что вообще такое «иконка». Это маленькое изображение, которое украшает сайт и делает некоторые часто употребляемые элементы, например, кнопки или ссылки меню, нагляднее. Примеры иконок вы можете видеть на сайте wedal.ru в горизонтальном и вертикальном меню:

Читайте также:  Как отключить вай фай и подключить проводной интернет

Проблемы использования иконок

Какие проблемы были при использовании иконок?

CSS-спрайты (если вы не знакомы со спрайтами, прочитайте в первую очередь эту статью):

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

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

Иконочные шрифты (Icon Fonts).

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

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

Имеются у данного подхода и недостатки, но они несущественны:

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

Иконочные шрифты. Где взять? Готовые наборы шрифтов

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

Одним словом, есть, где разгуляться =).

Из всех перечисленных выше сервисов хочу выделить Font Awesome. Сервис имеет хороший и очень внушительный набор иконок, среди которых можно найти подходящие практически на все случаи жизни.

Также хочу заметить, что если вы используете у себя на сайте CSS-фреймвок Bootstrap, по которому на сайте есть серия уроков Создание адаптивного шаблона Joomla с использованием Bootstrap, то в нем уже есть готовый набор иконок. Посмотреть их можно здесь. А если ко всему прочему вы используете еще и шаблон MasterBootstrap, то в его настройках сможете подключить на сайт Font Awesome, активировав всего одну опцию.

Предупреждение! Не стоит бездумно подключать на сайте подряд все шрифты, если из каждого вам понравилось всего несколько иконок. Файлы шрифтов имеют довольно большие размеры (десятки, а иногда и сотни килобайт) и подключение на сайт сразу нескольких наборов шрифтов приведет к существенному замедлению его загрузки.

Иконочные шрифты. Где взять? Генераторы шрифтов

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

Генераторы позволяют делать три вещи:

Вот несколько бесплатных генераторов иконочных шрифтов:

Читайте также:  Pioneer avh 160dvd как подключить айфон

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

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

Иконочные шрифты. Как подключить в Joomla?

Чтобы подключить к вашему сайту на Joomla иконочный шрифт, нужно:

Этот код подключит заданный css-файл к шаблону.

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

На этом всё. Проверить подключен ли CSS-файл шрифта к шаблону можно так:

Также советую проверить правильность указания пути в CSS-файле шрифта. Обычно путь указан как:

Иконочные шрифты. Как использовать в Joomla?

Использовать иконку, которая вводится на странице как буква, несомненно, круто. Но еще круче, когда никакую букву вводить не нужно в принципе. Современные иконочные шрифты используют CSS-псевдокласс :before и CSS-стиль content. Не вдаваясь в технические детали, их суть сводится к тому, чтобы показать в html-теге с заданным классом какое-то содержимое, которое указано только в CSS-файле, но не указано в html. К примеру, если у нас есть пустой div на странице, у которого есть какой-то CSS-класс, то мы можем только лишь средствами CSS поместить в него символ. Вы можете посмотреть, как это работает, выделив с помощью Firebug или другого веб-инспектора, любую иконку на wedal.ru.

Таким образом, используя технику, описанную выше, можно показывать иконку лишь добавлением к необходимому html-тегу соответствующего CSS-класса. Каждая коллекция иконок содержит описание этих классов. Посмотрим на Font Awesome. На странице icons представлен список всех иконок с подписями, каждая из которых является уникальным CSS-классом, который данную иконку вызывает:

Если кликнуть по любой из иконок, откроется отдельная страница, на которой указан полный html-код вставки иконки, например:

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

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

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

Источник