Font change to JotForm Theme doesn't 'stick'

  • lritter
    Asked on October 5, 2018 at 11:02 AM

    I'm using the JotForm Simplicity Theme. However, I need to use Arial font. Despite changing this in Styles, it constantly reverts back to the original font style: Muli. Have to constantly go back to Styles and reselect Arial.  How can I fix this?

  • Nik_C
    Replied on October 5, 2018 at 12:27 PM

    I checked your form, but the font is Arial, I see the font is set in Styles and in Custom CSS.

    Is your form embedded anywhere or you're using it directly?

    Thank you!

  • lritter
    Replied on October 5, 2018 at 1:14 PM

    Using directly.

  • Nik_C
    Replied on October 5, 2018 at 2:57 PM

    I'm sorry, what I meant, I tested your form and I saw that font is Arial, I used font inspector as you can see below:

    1538765781screencast Screenshot 10

    Are you still experiencing this issue?

  • lritter
    Replied on October 8, 2018 at 2:35 PM

    Hi Nik_C,

    I checked the form this morning and the issue wasn't fixed. 

    However, I had asked a question, in a different thread about formatting headers/subheaders. The CSS I was given worked to do the formatting I wanted. 

    So, I revisited the CSS and added the font-family to each section of code. This has seemed to fix the issue...I hope.


    /*Main Header*/

    h1#header_136 {

        color : #555555;

        font-family : arial!important;

        font-weight : normal;

        font-size : 34px;

    }


    /*Main Header Sub-Header*/

    div#subHeader_136 {

        font-family : arial !important;

        font-size : 18pt !important;

        font-weight : normal;

        font-style : italic;

        color : #2e6da4;

    }


    /*Section Header*/

    h3#header_535,h3#header_536,h3#header_537,h3#header_579 {

        font-family : arial!important;

        font-size : 22px;

        color : #2e6da4;

        font-weight : normal;

        font-style : italic;

    }


    /*Section SubHeaders*/

    div#subHeader_535,div#subHeader_536,div#subHeader_537,div#subHeader_579 {

        font-family : arial !important;

        font-size : 14px !important;

        color : #555555;

        font-weight : normal;

        font-style : italic;

    }


    Thank you for your help!

  • Nik_C
    Replied on October 8, 2018 at 4:07 PM

    Thank you for getting back to us.

    Yes, custom CSS can alter the font style as well. Did you experience this issue with any label in your form?

    So we can check and apply the same.

    Thank you!

  • lritter
    Replied on October 9, 2018 at 3:40 PM

    Hi Nik_C,

    Looks like the issue was only with the headers/subheaders. The labels appear ok too.

    Thank you for following up with me!