How can I make the paragraph font match to all form field text?

Hi See below, I want to use the same formatting throughout? I've tried changing the font to Inter (Default) on the paragraph form but maybe I'm getting the syntax on the html wrong? (I can't chose inter as a font on the GUI) paragraph section is circled below.

Hi Garvan_Rice1,

Thanks for reaching out to Jotform Support. Since you're using an Inter Font consistently across your form but aren’t able to select it for paragraph fields within the GUI, you can easily achieve this by injecting custom CSS into your form. Let me show you how:

1. First, copy this code:

@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap') {  

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

}

2. In Form Builder, click on the Paint Roller icon at the upper right side of the panel to open the Form Designer Menu.

3. Go to the Styles tab, scroll down to the Inject Custom CSS input box and paste the CSS Code. Take a look at the screenshot of the result below:

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

Hi Joeni, so possibly the font is not the issue, as the spacing is not consistent even with the new font, I want the 2 paragraphs to look identical.

Hi Garvan_Rice1,

Could you clarify the type of spacing you're aiming for? Are you looking to reduce the space above and below the elements, or adjust the line spacing within the text itself?

Once we hear back from you, we'll be able to help you better with this.

Hi Joeni, its a bit of everything, the kerning in the words is different, as is the word spacing across the span. So those are key, I've asked support before about trimming the top and bottom padding but i'm not sure it was answered or worked when I tried it, apologies. I can scan through my previous support for that one, but key issues here are the kerning and word spacing.

Hi Garvan_Rice1,

Add the custom CSS code below to remove the padding and fine control over spacing:

#id_227, #id_144, #id_346, #id_228 {

  padding-top 0px!important;  

  padding-bottom: 0px;

}



p {

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

  letter-spacing: 0.3px; /* Adjust this as needed for kerning */

  word-spacing: 1px;     /* Adjust for word span consistency */

  line-height: 1.3;       /* Optional: for paragraph flow */

  padding-top: 0px;

  padding-bottom: 0px;

  margin: 0;

}

Check out my screencast below to see the result: Give it a try and let us know if you have any other questions.

Hi this appears to work in one page of one form, how can I apply this to all 42 forms I am working on and some with over 200 fields?

Hi Garvan,

To keep your paragraph formatting consistent across all your forms, you can paste the following CSS to each one:

p {

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

  letter-spacing: 0.3px;

  word-spacing: 1px;

  line-height: 1.3;

  padding-top: 0px;

  padding-bottom: 0px;

  margin: 0;

}

This will ensure all paragraph elements maintain the same font and spacing, matching your input fields for a unified look.

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

Brilliant thank you Kyle I will try this now.