Jotform Injecting Adobe Font TypeKit to Form

  • Profile Image
    Lbmils
    Asked on February 03, 2021 at 06:40 PM

    Hello I am trying to embed adobe type kit to my form. I don't think i am doing it correctly. Can you please show me what am I doing wrong?


    Also Once the type kit is embed how do I actually change the text with in my form?

  • Profile Image
    Vick_W
    Answered on February 03, 2021 at 11:35 PM

    Hi there,

    The Adobe Typekit Web Fonts can be applied similarly to Google Web Fonts.

    You will need to use the @import link in the custom CSS section of the form.

    Example:

    o6ivo.png

    So, the next CSS can be added to the form:

    @import url("https://use.typekit.net/vib5kay.css");

    .form-all * {

    font-family: fira-sans, sans-serif;

    font-style: normal;

    }

    abmm9.png

    Let us know if you need further assistance.

    Thanks

  • Profile Image
    Lbmils
    Answered on February 03, 2021 at 11:49 PM

    Hey , can you look at mine? I have that info in there already but I’m sure I’m missing something and I can’t figure it out.

    Also Once the type kit is embed how do I actually change the text with in my form?


  • Profile Image
    Vick_W
    Answered on February 04, 2021 at 01:27 AM

    Hi there,

    Please remove the CSS you are currently using and inject the following in the first link:

    @import url("https://use.typekit.net/pxs1nvn.css");
    .form-all, .form-all * {
    font-family : 'brandon-grotesque', 'futura-pt', sans-serif !important;
    font-family: futura-pt, sans-serif;
    font-weight: 700;
    font-style: normal;
    }

    1612419976_601b938833dc4_You can check the result in this cloned form.

    https://form.jotform.com/210341121327943

    Let us know if you need further assistance.

    Thanks

  • Profile Image
    Lbmils
    Answered on February 04, 2021 at 05:04 AM

    I attached some screen shots. One you can see the fonts how the look like a great height. But on my form the font is showing up like its short or smashed. Also, you have not answered my question as to how do I select what variation of the font do I want for different elements on my form. For example, the titles would be the bolder font, the tag or subheads a different one and so on.1612433040_601bc6906d446_1612433039_601bc68f17136_

  • Profile Image
    sylas
    Answered on February 04, 2021 at 06:33 AM

    Hi,

    I've been working on your request. I'll be assisting you as soon as I'm done. Thank you for your patience.

    Do not hesitate to contact us if you have any further questions.

  • Profile Image
    sylas
    Answered on February 04, 2021 at 06:46 AM

    Hi Lbmils,

    I attached some screen shots. One you can see the fonts how the look like a great height. But on my form the font is showing up like its short or smashed.

    Sorry for the inconvenience. You can change the font size under Form Designer (Brush icon on the right) > Style > Font Size as you can see below.

    1612437784_601bd918c93c4_font_size.gif

    Also, you have not answered my question as to how do I select what variation of the font do I want for different elements on my form. For example, the titles would be the bolder font, the tag or subheads a different one and so on.

    In order to apply this to each text on your form, kindly try this CSS code (replace it with the one my colleague sent above):

    * {

    font-family : 'brandon-grotesque', 'futura-pt', sans-serif !important;

    font-family: futura-pt, sans-serif;

    font-style: normal;

    }

    If you'd like to make question titles bold only, kindly inject this CSS too (I recommend you playing with the font-weight value to find the desired one):

    .form-label {

    font-weight: 700;

    }

    If you need to change the weight of specific texts (tags, subheads etc.), please provide us with more details (which text, labeli subheader on the form) so that we can assist you better.

    Do not hesitate to contact us if you have any further questions.