Пошаговая инструкция: Как добавить шрифт из Google Fonts на сайт Prodamus.XL 

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

Шаги добавления шрифта

1. Выбор страницы для редактирования

1. Перейдите в систему Prodamus.XL.
2. Войдите в раздел «Сайты».
3. Выберите ваш сайт и страницу, куда хотите добавить шрифт. Это может быть любая страница — на ваше усмотрение.

2. Выбор шрифта на Google Fonts

1. Зайдите на сайт Google Fonts.
2. Найдите шрифт, который хотите использовать, через строку поиска.

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. Введите следующую команду, чтобы применить шрифт:

font-family: 'Название_шрифта', sans-serif;

Например:

font-family: 'Roboto', sans-serif;

2. Применение шрифта ко всей странице

1. Для применения шрифта ко всей странице используйте CSS-селектор & (ампесанд):

& { 
font-family: 'Название_шрифта', sans-serif; 
}

Обязательно используйте фигурные скобки {} для описания стилей.

Добавление нескольких шрифтов

1. Выберите несколько шрифтов на Google Fonts, используя кнопки выбора рядом с названиями шрифтов.
2. Нажмите Get Embed Code — код автоматически включает все выбранные шрифты.

2. Скопируйте полученный код и вставьте его в HTML-элемент на странице, как описано ранее.

3. Для каждого шрифта добавьте отдельный font-family в CSS элемента:

font-family: 'Шрифт1', sans-serif;
font-family: 'Шрифт2', serif;

Заключение

Теперь вы знаете, как добавлять и настраивать шрифты из Google Fonts на сайте Prodamus.XL. Это простой способ сделать ваш сайт более профессиональным и уникальным. Если потребуется, вы легко можете настроить несколько шрифтов для разных элементов, используя пользовательский CSS.

Еще больше полезных инструкций и материалов для технических специалистов у меня в Telegram-канале

ПОДПИСАТЬСЯ