База знаний
по возможностям платформы

Дополнительные шрифты Google Fonts для лендинга. Готовый виджет

Здравствуйте, дорогие пользователи платформы LPgenerator!

Сегодня мы готовы порадовать вас хорошей новостью: в визуальный редактор платформы добавлен новый долгожданный виджет “Дополнительные шрифты”.

С помощью нового виджета вы сможете загрузить в текстовый редактор LPgenerator любой шрифт (или сразу несколько), представленный на ресурсе Google fonts.

Дополнительные шрифты для всех элементов лендинга в LPgenerator

Итак, расскажем как это сделать.

1) Зайдите на ресурс Google fonts.

Google fonts

2) Обязательно укажите алфавит , то есть набор символов.

Если лендинг русскоязычный, то выберите кириллический (Cyrillic):

Google fonts

Google fonts

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

Google fonts

3) Выберите нужный шрифт.

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

Google fonts

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

Google fonts

Нажмите на "+" сверху справа от шрифта для того, чтобы добавить его.

Google fonts

Обратите внимание: шрифт будет добавлен именно той толщины, которую вы задавали в окне настройки:

Google fonts

4) Добавленный шрифт отобразится в вашей коллекции внизу:

Google fonts

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

Перейдите в коллекцию добавленных шрифтов. Для этого кликните по черной панели внизу:

Google fonts

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

Google fonts

Удалить ненужный шрифт из коллекции можно нажав на иконку минуса:

Google fonts

При необходимости можно отменить удаление. Для этого нажмите "UNDO" в правом нижнем углу:

Google fonts

5) Проверьте настройки вашего шрифта: 

Google fonts

Если набор и внешний вид добавленных шрифтов устраивает, перейдите в раздел "EMBED" и полностью скопируйте содержимое поля "STANDART":

Google fonts

6) Откройте целевую страницу в редакторе LPgenerator

LPgenerator

7) Нажмите на иконку “Дополнительные шрифты” на панели виджетов слева:

Дополнительные шрифты

8) В открывшемся окне, в поле “Введите url шрифта” вставьте скопированную строку:

Введите url шрифта

9) Подключенные шрифты отобразятся в поле “Названия шрифтов”

Введите url шрифта

10) Сохраните настройки

Введите url шрифта

11) С помощью инструмента “Текст” зайдите в текстовый редактор LPgenerator:

текст

Или зайдите в редактор кликнув дважды по существующему на лендинге тексту.

12) В разделе "Шрифт" внизу выпадающего списка вы увидите добавленные дополнительные шрифты:

дополнительные шрифты

13) Отредактируйте текст по вашему вкусу и сохраните страницу.

Теперь отредактированный текст будет отображаться с новыми шрифтами и в редакторе.

дополнительные шрифты

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

шрифт

шрифт

Аналогично используйте этот шрифт для кнопки попап формы:

шрифт

Шрифт также подойдет для полей попап формы.
Достаточно выбрать его в свойствах поля справа в редакторе попап формы:

шрифт

Для полей обычной лид-формы шрифт указывается в простых свойствах справа:

шрифт

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

Обратите внимание:

  • если шрифт не появился в списке, сохраните страницу и обновите вкладку редактора
  • если добавили новую лид или попап форму, а загруженного шрифта в их свойствах нет, сохраните страницу и обновите вкладку редактора
  • на данный момент дополнительный шрифт из списка не применяется к таким специфичным типам полей как: радио кнопки, выпадающие списки и поля типа «флажок». Для этих полей шрифт нужно прописывать в стилях с помощью css.
Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 2 из 2
Еще есть вопросы? Отправить запрос

Комментарии

  • Avatar
    Евгений

    все сделано, шрифты появились в списке, но ни один не меняется, причем ни старый ни новый

  • Avatar
    Julia Kanunnikova

    Здравствуйте!
    Дополнительный шрифт на работает в браузерах Microsoft Edge (IE) и в Safari (iOS)?

  • Avatar
    Алена Балакина

    Здравствуйте, Юлия!

    Должны отображаться.
    Обратите внимание: в ссылке на шрифт должен присутствовать параметр subset=cyrillic (если используете кириллицу).
    Скриншоты: http://prntscr.com/bubfa7 http://prntscr.com/bubffh

    Если параметр в ссылке есть, а шрифты не подгружаются, напишите нам по адресу support@lpgenerator.ru
    В письме укажите ссылку на страницу с проблемой.

    Изменено: Алена Балакина
  • Avatar
    Julia Kanunnikova

    Алена, спасибо большое! Действительно все получилось!

  • Avatar
    Алена Балакина

    Юлия, очень рады! Приятной работы!

  • Avatar
    Владимир

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

    Шрифт comfortaa

    Изменено: Владимир
  • Avatar
    Алена Балакина

    Здравствуйте!

    Проверьте, что настроен этот параметр - http://prntscr.com/dcqy5x
    Он должен отображаться в ссылке - http://prntscr.com/dcqxud

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

    Если остались дополнительные вопросы, напишите нам по адресу support@lpgenerator.ru

  • Avatar
    Владимир

    Спасибо большое!

На базе технологии Zendesk