Здравствуйте, уважаемые пользователи LPgenerator!
Обратите внимание: для того, чтобы подключить шрифт стандартным способом, используйте готовый инструмент. Он легок в использовании и позволит добавить дополнительные шрифты без лишних усилий:
>>>>>> Виджет для добавления шрифтов
В этом посте вы узнаете, как добавить дополнительный шрифт на ваш лендинг с помощью сервиса Google Fonts через добавление скриптов.
1. Зайдите на ресурс https://fonts.google.com/
2. Обязательно укажите алфавит, то есть набор символов.
Если лендинг русскоязычный, то выберите латинский (Latin) и кириллический (Cyrillic):
![кириллик](https://138018.selcdn.ru/KB_images/omnideskru/012562/e7112e1e8fc6b52ee57d059c43148de4.png)
3. Выберите понравившийся шрифт (или шрифты) и нажмите "+":
![Add to Collection](https://138018.selcdn.ru/KB_images/omnideskru/012562/ec4499f851c063aacff9b2e0032ee5f3.png)
4. Перейдите в коллекцию добавленных шрифтов. Для этого кликните по черной панели внизу:
![Google fonts](https://138018.selcdn.ru/KB_images/omnideskru/012562/ef107b02af5728f8f126e89108aa5545.png)
5. В открывшемся окне в первом пункте отображаются выбранные ранее шрифты.
Помните: использование большого количества различных шрифтов Google Fonts может замедлить загрузку вашей целевой страницы. Показатель влияния выбранных стилей на скорость загрузки страницы отображается справа.
![шрифты](https://138018.selcdn.ru/KB_images/omnideskru/012562/6045c66d75573b266c260551364d2abc.png)
6. Если набор и внешний вид добавленных шрифтов устраивает, перейдите в раздел "EMBED" и полностью скопируйте содержимое поля "STANDART":
![Google fonts](https://138018.selcdn.ru/KB_images/omnideskru/012562/e75fd146f403f99901f3ce86b304da75.png)
Не закрывайте вкладку Google Fonts, она нам еще понадобится.
Откройте необходимую целевую страницу в редакторе LPgenerator и нажмите инструмент«Скрипты»:
в открывшемся окне нажмите «Добавить новый скрипт»;
пропишите название скрипта;
выберите положение скрипта «Внутри тега HEAD»;
вставьте скопированный код;
не забудьте сохранить изменения.
![LPgenerator](https://138018.selcdn.ru/KB_images/omnideskru/012562/c95785bdb602b2e88e3c1642a1b83d75.png)
7. Вернитесь во вкладку Google Fonts.
Скопируйте код CSS, который генерируется для использования подгруженных шрифтов.
![css](https://138018.selcdn.ru/KB_images/omnideskru/012562/e003dd2da0ae0f77b418503f0b053b96.png)
Для каждого шрифта используется свой CSS.
Например, для шрифта Lobster код выглядит так: font-family: 'Lobster', cursive;
Далее по тексту данный код будет называться CSS для шрифта.
8. Вернитесь в редактор LPgenerator и кликните по элементу (текст или кнопка), к которому нужно применить загруженный шрифт.
Есть особенности применения стилей для разных элементов лендинга.
CTA-элементы
Чтобы изменить стиль шрифта на кнопке, достаточно кликнуть по ней и в расширенных свойствах справа добавить CSS для шрифта (скопированный в восьмом шаге).
![CSS для шрифта](https://138018.selcdn.ru/KB_images/omnideskru/012562/69265f21ce8253651c70e72c64413dc5.png)
Текстовые блоки целевой страницы
Для того чтобы применить внешний шрифт для текстового блока, для которого вы уже меняли шрифт, недостаточно просто прописать стиль в его расширенных свойствах. Необходимо также сбросить текущее форматирование. Для этого выделите текст и нажмите кнопку «Убрать форматирование» в блоке редактирования текста.
Внимание: при этом будут сброшены все изменения, внесенные в размер, стиль шрифта, выравнивание и т. д.
![Убрать форматирование](https://138018.selcdn.ru/KB_images/omnideskru/012562/0b75ca0092c2bd49ec50ac6159015274.png)
Далее щелкните по тексту и в его расширенных свойствах справа добавьте CSS для шрифта из шага 8:
![текст](https://138018.selcdn.ru/KB_images/omnideskru/012562/eb6dba43c9efd82428f5c19b5a8c800f.png)
После этого можно будет снова указать размер, выравнивание и другие атрибуты.
Если текстовый блок на целевой странице создается впервые, и вы не изменяли его шрифт, то достаточно щелкнуть по тексту и добавить CSS для шрифта в расширенных свойствах элемента.
9. Сохраняем изменения и любуемся результатом.
Обратите внимание: в редакторе LPgenerator шрифт останется прежним, дополнительные шрифты отображаются только в предпросмотре и при посещении опубликованного лендинга.
![просмотр](https://138018.selcdn.ru/KB_images/omnideskru/012562/5c7fbb366a18d7c5c44a958a51f4e379.png)
На этом всё. Также мы будем рады ответить на любые ваши вопросы, адресованные на почту support@lpgenerator.ru.
Высоких Вам конверсий!
С уважением,
команда LPgenerator