How to insert Montserrat family in my form

  • Profile Image
    specialmoderndesign
    Asked on November 04, 2021 at 10:14 PM

    When I use.....

    &display=swap

    in the CSS, my background picture reverts back to the theme original and the fonts too.

    I had to remove it to work.

    Still need to get the Monserrat weights in there. When I post what Google provides, it gets messed up.


    Then.... how am I able to tweak letter-spacing, etc?

  • Profile Image
    Martin_A
    Answered on November 04, 2021 at 10:38 PM

    Hi there,

    Can you provide us with more details about the form where this issue appears? Provide us with the link to the form so we can offer you further assistance. I have tried to implement the Monserrat fonts with the "&display=swap" on a form with a picture background and there is no problem on my end.

    Provide us with the link to the form so we can check your custom injected CSS.

    Where to Find My Form URL?

    Thank you.

  • Profile Image
    specialmoderndesign
    Answered on November 05, 2021 at 03:23 PM

    Sure- sorry My question was moved and seems out of context:

    https://form.jotform.com/212988731551160

    I would just like to have availabilty to the Montserrat family. thanks

  • Profile Image
    Martin_A
    Answered on November 05, 2021 at 05:43 PM

    Hi there,

    You start by choosing the wanted Font family in Google fonts, in this case, the Montserrat family. You can choose the style/weight of the font you want to import, and then use the @import method.
    Please note, don't copy the <style> brackets when implementing the code into your form.

    In your form inject the following CSS for the Montserrat family


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

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

    This is the result after implementing the requested font family into your form: https://form.jotform.com/213087096495970

    Let us know if you need any further assistance.

    Thank you.

  • Profile Image
    specialmoderndesign
    Answered on November 06, 2021 at 09:19 PM

    I think I have that. I also see in google all the weight options. What you show above is a single weight, 700.

    1636247944_61872988c3e34_Screen Shot 202

    <I understand the <style> brackets don't need to be used)

  • Profile Image
    Billy_G
    Answered on November 06, 2021 at 11:22 PM

    Hi there!

    Please confirm if you still need help with this. I see that the form background is still the same and the font is Montserrat.

    We'll be waiting for your response.

  • Profile Image
    specialmoderndesign
    Answered on November 08, 2021 at 02:04 PM

    My question specifically is having access to the weights

    Also- I had to start a new form: https://form.jotform.com/213115713418145

  • Profile Image
    Martin_A
    Answered on November 08, 2021 at 04:54 PM

    Hi there,

    In your form, if you use the @import link from Google fonts for importing multiple weights in a single link the background of your form disappears, and some of the other implemented parameters change their value. You mentioned this issue previously but didn't clarify it enough so we can understand the real problem.
    To avoid this issue you need to implement the weights of the fonts with the @import link one by one. For example:

    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,200&display=swap');  
    * {
      font-family : 'Montserrat', sans-serif !important;
      font-weight: 200;
      font-style: italic; 
       
    }

    Here I implemented three different weights of the same font family, but I inject the 200 font-weight with the italic font style. You have to choose the wanted weights from the Montserrat font family and @import them one by one so you can avoid the issue with the custom CSS on your form.
    Here is the example from above implemented in your form's CSS: https://form.jotform.com/213116289794969

    Let us know if you need any further assistance.
    Thank you.