Form Design: How to Add a New Font

How do I add a new font?

Hi Jahangir,

Thanks for reaching out to Jotform Support. To add a new font to your Jotform form design, you have a couple of options:

Using Built-in Fonts:

1. In Form Builder, click on the Paint Roller icon on the right side.
2. In the Form Designer on the right side, go to the Styles tab.
3. In the Font section, click on the Downward Arrow and select or search for the font you want to use from the dropdown menu.

Using Google Fonts or Custom Fonts:

1. Get the Google Fonts import code: Visit Google Fonts, choose a font, select the styles you want, and copy the @import code under "Use on the web".
2. Inject Custom CSS: In Form Builder, open the Form Designer (Paint Roller icon), go to Styles, scroll down to "Inject Custom CSS," and paste the @import code at the top.
3. Add the font-family declaration: Right after the import code, add CSS like {font-family: 'FontName', sans-serif;} replacing 'FontName' with the font-family name from Google Fonts.
4. Preview your form to see the changes.

You can also use custom fonts hosted on your server by uploading font files and injecting the appropriate @font-face CSS code into your form.

For detailed instructions, you can check these guides:

• How to Use Google Fonts and Custom Fonts in Jotform
• How to Inject Custom CSS Codes

Give it a try and let us know how it goes.

I have a downloaded file, not google fonts. i have satoshi font

Hi Jahangir,

If you downloaded a file, you'll have to host your font file using in your own server by uploading it via FTP or cPanel. Then, in the steps provided earlier by my colleague, once you've opened the Custom CSS section, you can use the code below:

@font-face {  

font-family: 'MyAwesomeWebFont';  

src: url('https://example.com/webfont.woff') format('woff'),  url('https://example.com/webfont.ttf') format('truetype'); 

} 



* {  

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

}

Just make sure to replace the src values in the code with your form's URL and format.

Give it a try and let us know if there's anything else we can help you with.