Как подключить собственный шрифт к форме

В нашу форму Вы можете подключить любой шрифт из GoogleFonts. Это сервис, с помощью которого Вы можете подключить более 700 шрифтов в свою форму. Для этого Вам необходимо перейти во вкладку “Тема оформления” в раздел “CSS”:

В GoogleFonts, Вы можете выбрать категории шрифтов. Для того, чтобы сервис показал шрифты с поддержкой русского языка в списке “Language” выберите пункт “Cyrillic”:

Выберите необходимый шрифт, для примера - “Roboto” и кликните на него:

Выберите понравившийся стиль и нажмите кнопку “+Select this style”:

Справа появится меню выбранных стилей и их описание во вкладке “Review”. Нас интересует вкладка “Embed”. Кликните на эту вкладку:

Откройте “@import”, где находится необходимый код для нашей темы оформления:

Необходимо скопировать код, который заключён в тег <style> и значение в пункте "CSS rules to specify families". Далее вставить в разделе "CSS", во вкладке "Тема оформления":

На скрине во второй строке прописали в таком виде через знак " * ", чтобы этот стиль был применён ко всем элементам формы.

Если выбрать несколько стилей для шрифта, то во вкладке "@import" добавится этот стиль:

Тогда используемый шрифт в форме будет иметь такой вид:

Также, можно задать стиль определённому элементу. Для этого добавим, например для элемента "ФИО" такой код:

Где .user_formish table.username input.text отвечает за введённый текст в поле "ФИО":

Также можно добавить код для конкретного элемента. Для этого, например, можно задать класс элементу. Добавим в форму элемент "Текстовое поле":

Зайдём в режим редактирования элемента и в поле "Имя CSS класса", укажем название класса - "prostotext":

Тогда добавляемый код должен иметь вид:

Теперь, при вводе данных в текстовое поле, именно в этом поле будет заданный шрифт:

Если Вам необходимо в другом текстовом поле использовать такой шрифт, то достаточно в этом элементе в режиме редактирования прописать класс "prostotext" в поле "Имя CSS класс". Таким же образом можно добавить стиль заголовкам:

Тогда в пользовательский CSS добавим класс .zagolovok:

Где класс label.label отвечает за названия всех элементов. Т.к. мы использовали только в элементе "ФИО" класс "zagolovok", то в режиме просмотра будет название этого элемента с заданным стилем:

Необходимо скопировать код, который заключён в тег <style> и значение в пункте "CSS rules to specify families". Далее вставить в разделе "CSS", во вкладке "Тема оформления":

На скрине во второй строке прописали в таком виде через знак " * ", чтобы этот стиль был применён ко всем элементам формы.

Если выбрать несколько стилей для шрифта, то во вкладке "@import" добавится этот стиль:

Тогда используемый шрифт в форме будет иметь такой вид:

Также, можно задать стиль определённому элементу. Для этого добавим, например для элемента "ФИО" такой код:

Где .user_formish table.username input.text отвечает за введённый текст в поле "ФИО":

Также можно добавить код для конкретного элемента. Для этого, например, можно задать класс элементу. Добавим в форму элемент "Текстовое поле":

Зайдём в режим редактирования элемента и в поле "Имя CSS класса", укажем название класса - "prostotext":

Тогда добавляемый код должен иметь вид:

Теперь, при вводе данных в текстовое поле, именно в этом поле будет заданный шрифт:

Если Вам необходимо в другом текстовом поле использовать такой шрифт, то достаточно в этом элементе в режиме редактирования прописать класс "prostotext" в поле "Имя CSS класс". Таким же образом можно добавить стиль заголовкам:

Тогда в пользовательский CSS добавим класс .zagolovok:

Где класс label.label отвечает за названия всех элементов. Т.к. мы использовали только в элементе "ФИО" класс "zagolovok", то в режиме просмотра будет название этого элемента с заданным стилем:

Если Вам необходимо в других названиях элементов использовать такой шрифт, то достаточно в этом элементе в режиме редактирования прописать класс "zagolovok" в поле "Имя CSS класс".

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