How to match textbox input font with label font?

  • cmsacomms
    Asked on February 1, 2015 at 9:42 PM

    I have setup the overall font style of my form through the Theme Designer, using a google font ("Metrophobic"). However there seems to be no option in the designer to change the font that will be used for the input fields. Can I change this through the theme designer or through CSS? And if it is through CSS, where/how do I change this?

    Jotform Thread 507746 Screenshot
  • cmsacomms
    Replied on February 1, 2015 at 10:44 PM

    Hi, just a followup, I did manage to change the input font on most of the form by injecting the following CSS ...

    }.form-textarea, .form-upload, .form-dropdown, .form-matrix-column-headers, .form-matrix-row-headers, .form-matrix-values, .date-separate {

    font-family: "Metrophobic", sans-serif;

    font-size: 12px;}

    However, I am not sure how to apply this to the "day, month, year' fields across the form. Any ideas?

  • Ben
    Replied on February 2, 2015 at 8:22 AM

    It seems to me that the font is the same. Since the DateTime field uses TextBox in it which also has class .form-textbox then adding it to the list above will make sure that it is set properly.

    You would result in

    .form-textbox .form-textarea, .form-upload, .form-dropdown, .form-matrix-column-headers, .form-matrix-row-headers, .form-matrix-values, .date-separate {
       font-family: "Metrophobic", sans-serif;
       font-size: 12px;
    }

    You could also try to set all text to the font by using this CSS:

    * {
       font-family: "Metrophobic", sans-serif;
       font-size: 12px;
    }

    Do let us know how it goes.

  • cmsacomms
    Replied on February 2, 2015 at 10:01 PM

    I tried the CSS you suggested at the end and it applied the font to all text. That's what I needed so thanks for your help!

  • Ben
    Replied on February 3, 2015 at 8:32 AM

    You are welcome.

    Do let us know if you need any further assistance and we would be happy to assist.