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

В нашу форму Вы можете подключить любой шрифт из 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 класс".

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

Комментарии

Закажите разработку формы под ключ

Нет времени разбираться со всеми настройками самому? Не проблема!
Закажите разработку веб-формы у нас