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