What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to match textbox input font with label font?

    Asked by cmsacomms on February 01, 2015 at 09: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?

    Screenshot
    label textbox font style google font
  • Profile Image

    Answered by cmsacomms on February 01, 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?

  • Profile Image

    Answered by Ben on February 02, 2015 at 08: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.

  • Profile Image

    Answered by cmsacomms on February 02, 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!

  • Profile Image

    Answered by Ben on February 03, 2015 at 08:32 AM

    You are welcome.

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