Change the font for everything on the form

  • RFOneVision
    Asked on February 8, 2018 at 11:11 PM

    To match our current website, I would like to change the font for absolutely every form field and element to 'Effra light'. This font is not available in Form Designer.

    How can I do that?

    Thanks

  • RFOneVision
    Replied on February 8, 2018 at 11:13 PM

    I would also like labels to be bold.

    Thanks.

    :)

  • Nik_C
    Replied on February 9, 2018 at 5:43 AM

    The only way to use custom fonts is to rule:

    @import url(link to font api);

    And then you set the font in the form via CSS:

    .form-all *{

    font-family: 'name of the font family', sans-serif;

    }


    If you can find any similar font on Google https://fonts.google.com/, you can easily do that.

    Regarding the bold of the labels, you can insert this:

    .form-label {

        font-weight: bold!important;

    }

    To your Custom CSS field.

    But please be mindful that if Theme is used, it might override any entered CSS.

    Let us know if you have any further questions.

    Thank you!

     
  • RFOneVision
    Replied on February 9, 2018 at 8:27 AM

    I have inserted the following:

    /* Override remnants of source template-fix bug */

    .form-label, .form-input, .form-input-wide {
        background : none !important;
        border : none !important;
        font-family:'effra light',sans-serif;
        font-weight: bold !important;
    }

    /* Set font for whole form */

    .form-all {
        font-family:'effra light',sans-serif !important;
        background : #d5eef3 !important;
    }

    The form-label font-value works, but not the font-weight.

    The form-all font-family doesn't do a thing, even if form-label para is removed.

    Any ideas about why .form-all doesn't use the font, and why .form-label bold doesn't work?

    Thanks

  • Mike_G JotForm Support
    Replied on February 9, 2018 at 10:28 AM

    Like what my colleague, Nik_C, have mentioned above, you need to use the @import rule — https://www.w3schools.com/cssref/pr_import_rule.asp so you can use the font to your form.

    Here is an example of a font URL — http://fonts.googleapis.com/css?family=Open+Sans

    As for making the field labels in your form bold, I have checked your form and I see that the field labels are bold. If that is not what you are seeing on your end, can you help us determine the issue by sending us a screenshot, please?

    How-to-Post-Screenshots-to-Our-Support-Forum