How to match textbox input font with label font?

  • Profile Image
    cmsacomms
    Asked 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?

  • Profile Image
    cmsacomms
    Answered 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
    Ben
    Answered 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
    cmsacomms
    Answered 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
    Ben
    Answered 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.