How to apply Poppins Font or Trajan Pro Font to the form?

Secondly, I require Poppins Font or Trajan Pro Font. Is there a way to add it?

Hi onestopcareerpr,

Thanks for reaching out to Jotform Support. You can use custom fonts with Jotform by simply hosting your font on your own server, then importing it to your form's CSS using @font-face. Here's how to do it:

1. First, upload your font files to your server.

2. Then, copy 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;

}

3. In Form Builder, click on the Blue Roller Paint icon on the right side of the screen.

4. In the Form Designer panel on the right, go to the Styles tab.

5. Then, paste the code in the Inject Custom CSS section.

6. Lastly, replace the src values in the code with your font’s URL and format.

You can also check out our guide on that here for more details.

Give it a try and let us know if you need any more help.

You can use poppins or trajan pro in jotform by injecting custom css. first, grab the @import snippet from google fonts (for poppins) or host your trajan pro files and use @font-face. then paste it in the inject custom css box in the form designer’s styles tab. after that, set:

* {

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

}

or

* {

font-family: 'Trajan Pro', serif;

}

That makes the form use your chosen font.

If it doesn’t show up, double-check that your font url is correct, and that the CSS is loading before other rules.

Hi!

here is the @import

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap')

Thanks it worked.

2. Apply the font to your form

Right under the @import, add this CSS to tell your form to use Poppins:Hi onestopcareerpr,

Thanks for providing that font URL. While we cannot add the font for you, here are the steps you can take to add it on your end for Poppins:

1. Inject the @import

1. Open your form in Form Builder.
2. Click the Form Designer (paint roller icon) on the right.
3. Go to the Styles tab.
4. Scroll down to Inject Custom CSS.

1. At the very top of the CSS box, paste your import code:

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

2. Apply the font to your form

Right under the @import, add this CSS to tell your form to use Poppins:

.form-all, 

.form-all * {

  font-family: 'Poppins', sans-serif !important;

}

3. Save and preview

• Click Save in the CSS editor.
• Preview your form — you should now see Poppins as the active font.

Let me know how that goes for you and feel free to reach out if you require further assistance.