Change all form font using CSS

  • BBC2016
    Asked on May 2, 2016 at 1:54 AM

    all form font should be OPEN SANS - can u help with quick css???

    I cant get the .form all open sans css to work!???!?!?

     

    its supposed to look like the font on THIS form here:

    http://buildingbridgescoalition.org/moreinforsvp/

  • beril JotForm UI Developer
    Replied on May 2, 2016 at 2:36 AM

    To fix that issue, can you add the CSS code below?

    .form-all {font-family : 'Open Sans' !important;}

    .form-label { font-family: 'Open Sans' !important;}

    I hope this helps. Please let us know if you need further assistance on this, we would be happy to assist you further.

  • BBC2016
    Replied on May 2, 2016 at 10:46 PM

    didnt work//pls help!!

  • jonathan
    Replied on May 2, 2016 at 11:56 PM

    Please check my cloned form https://www.jotform.com/61229026878967

    Does  it have the correct font-family you were looking for?

    I checked your form http://www.jotform.us/form/61221289065150 CSS codes and I found multiple error on them.

    I corrected the mistakes on my cloned form and it has this CSS code now http://pastie.org/10821694

    If my test form have the correct font-family you need, you can overwrite your form current CSS codes with the one I provided. Check if it fixes the issue on your form.

    Let us know if still not resolve.

  • BBC2016
    Replied on May 3, 2016 at 1:20 AM

    oh wow - one last thing though - how can i make my form ( https://form.jotform.com/61221289065150 ) look like the font and sizing on this form i made?? http://buildingbridgescoalition.org/moreinforsvp/

  • Charlie
    Replied on May 3, 2016 at 1:43 AM

    I believe my colleague, Jonathan, have already provided a working CSS code in the link here: http://pastie.org/10821694. You just need to copy the whole CSS code there and replace it with the current one you have.

    Now in your CSS code, there are multiple styles that changes the font-size of your fields and labels, the sizing differs.

    In your form, I see that it is already in "Open Sans". Below is a screenshot showing the font-family used by your form.

    Change all form font using CSS Image 1 Screenshot 30

     

    Now the form you mentioned here: http://buildingbridgescoalition.org/moreinforsvp/ has the same font family in your current form, however, they differ on font-weight, some are also sub labels so they are smaller than the main labels. 

    You can search your current CSS code to find what elements have specific font-family and font-size. Here's a specific search in your CSS code, you'll see that you have a lot of CSS selectors where the style attribute font-family and font-size is used:

    Change all form font using CSS Image 2 Screenshot 41

     

    You can find those CSS styles and update them.