← Тема оформления

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создай любую веб-форму
всего за 3 минуты!

Мы используем файлы cookie, чтобы Вам было удобней пользоваться веб-сайтом. Используя эту страницу, вы соглашаетесь с нашей политикой в отношении файлов cookie.