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

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

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

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

>>>>>> Виджет для добавления шрифтов

В этом посте вы узнаете, как добавить дополнительный шрифт на ваш лендинг с помощью сервиса Google Fonts через добавление скриптов.

1. Зайдите на ресурс https://fonts.google.com/

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

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

кириллик

3. Выберите понравившийся шрифт (или шрифты) и нажмите "+":

Add to Collection

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

Google fonts

5. В открывшемся окне в первом пункте отображаются выбранные ранее шрифты.

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

шрифты

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

Google fonts

Не закрывайте вкладку Google Fonts, она нам еще понадобится.

Откройте необходимую целевую страницу в редакторе LPgenerator и нажмите инструмент«Скрипты»:

  • в открывшемся окне нажмите «Добавить новый скрипт»;
  • пропишите название скрипта;
  • выберете положение скрипта «Внутри тега HEAD»;
  • вставьте скопированный код;
  • не забудьте сохранить изменения.

 LPgenerator

7. Вернитесь во вкладку Google Fonts.

Скопируйте код CSS, который генерируется для использования подгруженных шрифтов.

css

Для каждого шрифта используется свой CSS.

Например, для шрифта Lobster код выглядит так: font-family: 'Lobster', cursive;

Далее по тексту данный код будет называться CSS для шрифта.

8. Вернитесь в редактор LPgenerator и кликните по элементу (текст или кнопка), к которому нужно применить загруженный шрифт.

Есть особенности применения стилей для разных элементов лендинга.

CTA-элементы

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

CSS для шрифта

Текстовые блоки целевой страницы

Для того чтобы применить внешний шрифт для текстового блока, для которого вы уже меняли шрифт, недостаточно просто прописать стиль в его расширенных свойствах. Необходимо также сбросить текущее форматирование. Для этого выделите текст и нажмите кнопку «Убрать форматирование» в блоке редактирования текста.

Внимание: при этом будут сброшены все изменения, внесенные в размер, стиль шрифта, выравнивание и т. д.

Убрать форматирование

Далее щелкните по тексту и в его расширенных свойствах справа добавьте CSS для шрифта из шага 8:

текст

После этого можно будет снова указать размер, выравнивание и другие атрибуты.

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

9. Сохраняем изменения и любуемся результатом.

Обратите внимание: в редакторе LPgenerator шрифт останется прежним, дополнительные шрифты отображаются только в предпросмотре и при посещении опубликованного лендинга.

просмотр

 

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 5 из 5
Еще есть вопросы? Отправить запрос

Комментарии

  • Avatar
    Аркадий Васильев

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

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

    Здравствуйте, Аркадий!

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

    Советуем открывать просмотр страницы в новой вкладке (правой кнопкой мыши по инструменту Просмотр -> Открыть в новой вкладке).
    Тогда Вы сможете редактировать страницу, сохранять изменения и обновлять вторую вкладку для просмотра итогового варианта.

  • Avatar
    Пользователь smobihelp

    А как добавить шрифт, которого нет в гугл шрифтах?

  • Avatar
    Максим Гуйван

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

    В коллекции GoogleFonts добавлены распространённые бесплатные шрифты, поэтому их подключение - процесс отлаженный и стандартный.

    Подключение других шрифтов зависит от различных факторов, и подобрать подходящий можно, зная больше подробностей о задаче. Напишите, пожалуйста, на ящик службы технической поддержки support@lpgenerator.ru - и мы сможем детально исследовать задачу.

  • Avatar
    Александр Подрезов

    Отвечаю на вопрос пользователя smobihelp. Много шрифтов очень интересных вот здесь http://allfont.net/
    Подключить их не представляет особой сложности.
    Кому интересно, пишите al.podrezov@yandex.ru
    Дам подробную инструкцию
    Пример здесь http://joxi.ru/eBsTVP3JTJD7YS7qIYw
    Так я реализовал таймер, который автоматом обнуляется каждые 24 часа и запускается снова. Шрифт LCDMono Normal

  • Avatar
    Вадим

    А можно ли подгрузить шрифты с другого хостинга?

  • Avatar
    Максим Гуйван

    Здравствуйте, Вадим!

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

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

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