Поред подразумеваних типова текста, Jotform такође подржава At-rules (нпр. @importand, @font-face). Можеш их користити да увезеш своје стилове текста са Google Fonts сајта или можеш додати прилагођене фонтове са сопственог сервера.
Додавање Google фонтова
- Копирај потребан код са следећег сајта https://fonts.google.com/
a. Претражи и одабери жељени стил.
![Како користити Google и друге фонтове у твојим обрасцима Image-1](https://shots.jotform.com/bojan/shared/2021/12/screenshot_1640010723.png)
б. Кликни на стил који желиш да користиш.
в. Одабери @import у Use on the web секцији.
г. Копирај @import код.
![Како користити Google и друге фонтове у твојим обрасцима Image-2](https://shots.jotform.com/bojan/shared/2021/12/screenshot_1640011308.png)
2. Врати се у креатор обрасца и под Стил картицом налепи претходно копиран код на врх посојећег CSS кода.
![Како користити Google и друге фонтове у твојим обрасцима Image-3](https://shots.jotform.com/bojan/shared/2021/12/screenshot_1640011433.png)
3. Да примениш одабране стилове текста, користи font-family својство.
4. За то, можеш да користиш следећи CSS:
.form-all*{
font-family:'Open Sans', sans-serif;
}
Замени Open Sans са именом одабраног фонта. Такође можеш да се вратиш на Google Фонтове и да пронађеш име испод кода који си копирао.
![Како користити Google и друге фонтове у твојим обрасцима Image-4](https://shots.jotform.com/bojan/shared/2021/12/screenshot_1640011623.png)
Додавање фонтова са сопственог сервера
Можеш користити следећи код да га налепиш у дизајнер обрасца. Наког тога, замени обавезне вредности као што је font-family име и извор твог фонта. Или, да се псотараш да је фонт компатабилан са свим претраживачима, креирај сопствени @font-face код коситећи следећи сајт: https://transfonter.org/.
Пример:
@font-face {
font-family:myFirstFont;
src:url(https://www.yoursite.comfontscoolfont_bold.woff);
font-weight:bold;
}
.form-all*{
font-family:’myFirstFont’,sans-serif;
}
![Додавање прилагођеног фонта](https://www.jotform.com/blog/wp-content/uploads/2021/12/screenshot_1642600631.png)
Уколико имаш нека питања, постави их у секцији коментара испод.
Пошаљи коментар: