Эффект появления при загрузке

PATTERN - фигуры

AOS -анимация

Документация по добавлению своего шрифта для вашего шаблона на Gantry 5 находится на сайте docs.gantry.org. Вроде все понятно, но на практике по внедрению стиля для частицы можно столкнуться  с трудностями.

Процедура добавления локальных шрифтов

Для использования своих шрифтов на шаблоне (например, на шаблоне Helium) Вам прежде всего надо найти и скачать понравившиеся шрифты. В документации на сайте docs.gantry.org  вам предлагается скачать шрифт bloody отсюда. 

 {module JL Text - gantry5 custom - demo1 (CSS ID)}

 {module JL Quotation - консультант demo2 (CSS ID)}

Переходим  на вкладку Webfont Kit и выбираем все форматы шрифтов - woff , tif, eot, svg.

Нажимаем на сайте кнопку DOWNLOAD @FRONT-FACE KIT  и получаем файл в формате ZIP 

Внутри находится 4 файла, которые мы будем использовать :

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

Предварительный этап закончен.

Далее стандартная процедура для Gantry 5 - в предварительно созданной папке custom создаем подпапку fonts. В папке fonts создаем, например подпапку bloody_false (обратите внимание на знак разделения слов _ ) и помещаем туда наши 4 файла.

Чтобы стиль нашего шрифта bloody-webfront  применить на шаблоне, выполняется вторая дополнительная стандартная процедура.

В файле custom.scss прописываем

@import "dependencies";
@include font-face('BloodyNormal', 'gantry-theme://fonts/bloody_false/bloody-webfont');

.font-family-bloody {
font-family: 'BloodyNormal',Helvetica,Arial,sans-serif;
font-weight: normal;
font-style: normal;}

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

Оригинальный путь приведен ниже:

Ошибка, как я полагаю, разработчиком допущена намеренно, чтобы нам поломать голову подольше - почему не прописывается стиль. А все дело оказывается в том, что в папке fonts/ шрифты написаны со строчной буквы, а в файле custom.scss - со строчных и прописных. Надеюсь, мои разъяснения по поводу шрифтов помогут Вам не допускать ошибок в будущем.

Использование стиля в частицах Gantry 5 (например, в названии) достигается стандарным методом записи HTML:

<span style="font-family: BloodyNormal;">Ваше название</span>

Выше мы расмотрели локальное добавление шрифтов на шаблон. Процедура добавления новых шрифтов, которые бы автоматически отражались в контенте вашего шаблона и в частицах Gantry 5, несколько иная.

Процедура добавления глобальных шрифтов

Легче всего скопировать понравившиеся шрифты с коммерческих шаблонов. Шрифты должны быть представлены в 5 форматах - woff , tif, eot, svg, woff2. Находятся шрифты в папке fonts [коммерческий шаблон / fonts] - все разложено по папкам и соответственно обозначено. Но даже на коммерческих шаблонах может не встречаться формат woff2 - в результате в дальнейшем при просмотре кода в браузере появляется ошибка - нет формата woff2 (поэтому выбирайте те шрифты, где присутствут этот формат)

     

Есть несколько путей переноса шрифтов. После небольших затруднений при активации новых шрифтов я остановился на следующей процедуре.

Изначально на шаблоне Helium в папке fonts установлены 2 типа шрифтов - lato и raleway, которые отображаются в административной панели шаблона в разделе Font Families:

Чтобы перенести новые шрифты на ваш шаблон, Вам надо в папке custom создать папку fonts и скопировать в неё с коммерческого шаблона или с других источников понравившиеся шрифты

Затем активировать новые шрифты в файле custom.scss [custom/scss/custom.scss]

Провести рекомпиляцию стилей с помощью Recompile CSS

На этом этапе вы не заметите изменений в разделе Font Families административной панели шаблона. Для этого необходимо скорректировать главный файл шаблона - theme.yaml в корневой папке [g5_helium/gantry/theme.yaml]. К сожалению, на сегодняшний момент не существует методов скорректировать эту процедуру через папку custom - поэтому продедуру проводить очень осторожно, предварительно скопировав исходный файл к себе на компьютер.

Сам исходный файл theme.yaml также можно сохранить по пути custom/gantry/theme.yaml - здесь он не оказывает влияния на ваш шаблон и всегда будет у вас под рукой.

Корректируем файл theme.yaml, вставив дополнительный код после слов "fonts:" (возможно прямое копирование из файла theme.yaml коммерческого шаблона)

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

P.S.

Чтобы выбранные шрифты отразились на сайте правильно - самое главное не перепутать вкладки, на которых происходят изменения шрифтов - base outline или default. (шрифты автоматически не переносятся с базового макета)