Описание подключения нестандартных шрифтов Google fonts. В данной статье будет полностью описан процесс как подключить новый шрифт Joomla.

1. Заходим на сайт Google fonts

google fonts

2. Вписываем название понравившегося шрифта или выбираем из списка предложенных (1). Есть возможность отсортировать шрифты по заданным критериям (1). Есть возможность вписать свой текст и посмотреть как он будет выглядеть в оформлении новым шрифтом (2). Нажимаем напротив выбранного шрифта Add to Collection (3).

choose google font

3. После добавления выбранного шрифта в коллекцию - он отобразится внизу.

choose google font collection

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

google font weight

5. Если Вы собираетесь использовать шрифт для текста с кириллицей (русского например) - не забывайте указывать кириллицу в параметрах подключения (1). В итоге Вы получаете готовый код вставки Google шрифта к себе на сайт (2). В случае подключения шрифта методом "Standart" - полученный код вставляется перед закрытием тега <head> в индексном файле (index.html - в случае статического сайта без CMS, файл index.php шаблона - в случае работы с Joomla CMS). При выборе подключения шрифта методом @import - полученный код вставляется в файле стилей css.

get google font code

6. Семейство шрифта, которое необходимо применить в css стилях на сайте.

google font family

7. Применение семейства шрифта к выбранному селектору в стилях css.

.selector {font-family: 'Open Sans', sans-serif;}

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

изменения в файле templates/{название шаблона}/templateDetails.xml
<field name="h1_font" type="list" label="h1 Font:" default="Arial, sans-serif">
 <option value="Open Sans, sans-serif">Open Sans</option>
добавление шрифта "Open Sans" google fonts для выбора шрифта заголовка H1 в настройках шаблона Joomla