Google font import does not work

  • Profile Image
    stormingrobots
    Asked on July 03, 2021 at 11:02 AM

    Please see form 211833910060142

    custom css:

    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');

    right at the top of the custom css.

    <div style="margin: 10px; font-family: Montserrat; font-size: 16px;"> in textbox

    add in @font-face...

    still not working. Please advise.


  • Profile Image
    stormingrobots
    Answered on July 03, 2021 at 11:07 AM

    solved..

    I had to two things:

    1. import .. get the google import statement from fonts.google.com
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
    1. then add:
    .form-all *{
        font-family: Montserrat;
    }


    But would you please explain why the import itself does not work?


  • Profile Image
    Welvin
    Answered on July 03, 2021 at 05:21 PM

    Yes, that's the correct process for using Google font in the form - as per the following user guide:

    https://www.jotform.com/help/100-how-to-use-google-fonts-and-custom-fonts-in-your-form

    As for the !important, you have to do it like the following:

    .form-all * {
      font-family : 'Montserrat', Roboto !important;
    }

    Or, use Sans Serift:

    .form-all * {
     font-family : 'Montserrat', sans-serif !important;
    }
  • Profile Image
    stormingrobots
    Answered on July 08, 2021 at 08:25 AM

    Does .form-all ... means it applies the font to the whole form though?


    But, what if I want to apply a font on just certain part only? e.g.

    .#id_5 {

    font-family: 'Montserrat', sans-serif!important;

    }

    but not the entire form?

  • Profile Image
    Amin_N
    Answered on July 08, 2021 at 10:16 AM

    Hi again,

    "Does .form-all ... means it applies the font to the whole form though?"

    Yes, as this is a global class inherited by all form fields.

    "But, what if I want to apply a font on just certain part only?"

    Simply by using the ID or the fields you want to impact.

    An example is the Phone Number field on the form below.

    https://www.jotform.com/211883811857060

    #label_4{
        font-family : 'Montserrat', Roboto !important;
    }


    Result:

    1625753653_60e7083520f59_

    Should you have any further inquiries, we will be more than happy to help.