Пошаговая инструкция: Как добавить шрифт из Google Fonts на сайт Prodamus.XL
Добавление уникальных шрифтов на ваш сайт помогает улучшить его внешний вид и пользовательский опыт. В этой инструкции вы узнаете, как подключить шрифты из Google Fonts и применить их на своем сайте в системе Prodamus.XL.
Шаги добавления шрифта
1. Выбор страницы для редактирования
- Перейдите в систему Prodamus.XL.
- Войдите в раздел «Сайты».
- Выберите ваш сайт и страницу, куда хотите добавить шрифт. Это может быть любая страница — на ваше усмотрение.
2. Выбор шрифта на Google Fonts
1. Зайдите на сайт Google Fonts.
3. После выбора шрифта нажмите на кнопку Get Font.
3. Получение кода для подключения
1. На странице выбранного шрифта нажмите Get Embed Code.
2. Замените в коде <link> на @import (см скриншот).
3. Скопируйте полный код с помощью кнопки Copy Code.
4. Добавление HTML-кода на страницу в Prodamus.XL
1. Вернитесь в Prodamus.XL и выберите редактируемую страницу.
2. Добавьте новый элемент «HTML-код» на страницу.
3. Перетащите его в верхнюю часть страницы (важно, чтобы код был подключен первым).
4. Нажмите «Редактировать», вставьте скопированный код и сохраните изменения.
Шаги использования подключенного шрифта
1. Применение шрифта через CSS
1. Выберите любой элемент на странице, к которому хотите применить шрифт.
2. В настройках блока найдите раздел «Продвинутые настройки» -> «Пользовательский CSS».
3. Введите следующую команду, чтобы применить шрифт:
Например:
2. Применение шрифта ко всей странице
Для применения шрифта ко всей странице используйте CSS-селектор & (ампесанд):
Обязательно используйте фигурные скобки {} для описания стилей.
Добавление нескольких шрифтов
1. Выберите несколько шрифтов на Google Fonts, используя кнопки выбора рядом с названиями шрифтов.
2. Нажмите Get Embed Code — код автоматически включает все выбранные шрифты.
3. Скопируйте полученный код и вставьте его в HTML-элемент на странице, как описано ранее.
4. Для каждого шрифта добавьте отдельный font-family в CSS элемента:
Заключение
Теперь вы знаете, как добавлять и настраивать шрифты из Google Fonts на сайте Prodamus.XL. Это простой способ сделать ваш сайт более профессиональным и уникальным. Если потребуется, вы легко можете настроить несколько шрифтов для разных элементов, используя пользовательский CSS.