Google fonts как подключить joomla

Joomla 3.x. Как изменить Google web шрифт

Этот туториал покажет, как изменить шрифт Google web в шаблонах Joomla 3.x.

Для того чтобы изменить шрифт Google web в шаблонах Joomla 3.x, необходимо выполнить следующие шаги:

Давайте изменим шрифт пунктов меню. С помощью дополнения Firebug для браузера Mozilla Firefox найдите шрифт, используемый определенным текстом в шаблоне. Информацию о том, как использовать Firebug вы можете найти здесь:

Откройте файл templates/themeXXXX/index.php и найдите ссылку на шрифт Google:

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

Откройте сайт http://www.google.com/webfonts и выберите желаемый шрифт, используя предложенные фильтры:

Обратите внимание на набор символов. Выберите шрифт, поддерживающий желаемый набор символов. Мы выбрали набор Cyrillic Extended, чтобы использовать кириллические шрифты:

Добавьте шрифт в коллекцию и нажмите кнопку Использовать (Use):

Выберите соответствующий набор символов и скопируйте сгенерированный код:

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

Теперь необходимо изменить шрифт в CSS файле. С помощью Firebug найдите путь к необходимому CSS коду (кликните правой кнопкой мыши > ‘Копировать адрес’ (‘Copy location’); здесь также можно видеть сроку, на которой находится код):

Прокрутите страницу сайта Google fonts вниз и скопируйте атрибут с вашим шрифтом в CSS файл:

Отредактированный код должен выглядеть следующим образом (см. скриншот ниже):

Обновите страницу сайта и просмотрите, как изменился шрифт меню:

Вы также можете воспользоваться детальным видео туториалом:

READ  Как можно подключить флешку к штатной магнитоле

Похожие записи

Мы с гордостью представляем новый видео туториал о Camera Slideshow, популярном плагине jQuery.

Our support team is ready to present you a new tutorial that shows how to add your WordPress site to Google Webmaster tools

Today we’re going to learn how to present your business to the fullest in an easy way.

Submit a ticket

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

Источник

Как правильно подключить шрифт от GoogleFonts

Используя пресеты шрифтов от google fonts разработчики редко заглядывают в код генерируемого css файла. А зря, там самое интересное.

Я хочу рассказать как избежать распространенных ошибок при подключении сторонних шрифтов и правильно использовать его в CSS.

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

Казалось бы, все просто. Заходишь на GoogleFonts, находишь любимый шрифт, копипастишь предоставляемый код и пользуешься на здоровье.

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

Как правильно подключить шрифт с GoogleFonts и использовать его в CSS?

Для этого нужно иметь базовые знания о типографике. Об это можно почитать в статье «Типографические термины, и зачем мне это знать?».

Шаг 1. Определимся с необходимым набором свойств

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

Чтобы определиться с первым параметром, нужно выяснить какие типы шрифта будут использоваться на сайте(толщина шрифта). Чаще всего достаточно набора «regular, regular italic, meium, bold». Гораздо реже на сайтах используют «light» и совсем редко «thin». По причине недостаточной читабельности, так как это уж очень тонкие начертания.

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

Если вы не привыкли к обозначению толщины шрифта при помощи «thin, light, regular, meium, bold». Вот таблица соответствий толщины веб шрифтов (font-weight):

READ  Как на телефоне нокия подключить ммс на

Шаг 2. Выбираем необходимые языки

Выбираем Latin и если на сайте планируется использовать кириллицу (русские символы), то выбираем еще Cyrillic.

Шаг 3. Подключение шрифта на сайт

Казалось бы все понятно. Скопировал тег link и вставил в head. Советую подключать шрифты не в head, а импортировать через css. Это позволит добиться лучшей скорости работы и получить лучший бал от Google.

Два варианта подключения шрифта, выбор за вами:

2) Подключение в общий файл стилей. В начало файла css нужно добавить код:

Внимание! Шрифт должен быть подключен до его использования в коде.

Код подключения генерирует GoogleFonts, его можно скопировать на вкладке «Embed», выбрав тип подключения «STANDARD» или «@IMPORT».

Шаг 4. Использование стороннего шрифта в CSS

GoogleFonts предлагает нам использовать шрифт так:

font-family: ‘Roboto’, sans-serif;

Но что тут делает ‘sans-serif’?

Запасной шрифт.

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

Но при его выборе нужно учесть ряд факторов:

Подробнее об этом Вы можете прочитать в статье «Как выбрать безопасный шрифт».

При написании названий шрифтов нужно руководствоваться следующими правилами:

Что за файл в итоге мы получили от GoogleFonts?

В файле подключены файлы шрифтов для разной толщины и стиля. Рассмотрим подробнее один из блоков кода:

3. font-family: ‘Roboto’;

4. font-style: italic;

6. src: local(‘Roboto Italic’), local(‘Roboto-Italic’), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1Mu51xMIzIFKw.woff2) format(‘woff2’);

7. unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;

Итак. Что в итоге? Нельзя не назвать странным, что GoogleFonts предоставляет для загрузки только шрифты формата woff2. Игнорировав при этом такие форматы, как SVG, TTF, woff.

Полагаю, можно довериться многолетнему опыту Google и сделать вывод что woff2 будет вполне достаточно для корректного отображения в разных браузерах.

Большим плюсом можно считать наличие проверки на установленные локально шрифты. Это может значительно сократить вес шрифта для пользователй, которые уже установили его на свой ПК.

READ  Как подключить спутниковую антенну к ноутбуку

Источник

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

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

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

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

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

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

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

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

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

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

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

Источник

Поделиться с друзьями
admin
Оцените автора
( Пока оценок нет )
Как подключить и установить...
Adblock
detector