Google font import does not work

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.

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?

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;

}

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?

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:

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