Fonts: unable to add correct Google font on form

  • Profile Image
    radialinternal
    Asked on November 18, 2021 at 05:29 PM

    In Advanced Designer (classic layout) there is a Design tab and a CSS tab.

    Which takes priority? For example, if we define H1 as 2rem in CSS tab and the Large header text size as 20px in Design tab, which controls the appearance?

    Similarly, we added a Google font on CSS tab using @import method & .form-all *.

    However, the Google font doesn't appear in any of the font dropdowns in Advanced Designer/Design tab.

    Should it? Or does the fact that it's defined as form-all on the CSS tab override whatever's shown as the font in the Design tab?

    Thanks.

  • Profile Image
    Samuel_Ray
    Answered on November 18, 2021 at 09:50 PM

    Hi there,

    To answer your question, the CSS codes injected on the form take priority over the design tab.

    But that changes if the code generated from the design tab has the !important property, it then takes precedence over the injected CSS code.

    As for your second question, as long as you're injecting the font into the form, it will be used on the entirety of the form. You can check this guide for more details: How to Use Google Fonts and Custom Fonts in Your Form.

    I hope this answers your questions. If you need further assistance, please don't hesitate to reach back out to us. Thank you!

  • Profile Image
    radialinternal
    Answered on November 18, 2021 at 10:58 PM

    Thank you, very helpful. Re: https://form.jotform.com/213165899962169

    We've added Google font Poppins in the CSS tab, but the form still renders in the Inter font.

    Can you let us know what CSS is missing?

    Appreciate your help.

  • Profile Image
    gerardw
    Answered on November 19, 2021 at 05:07 AM

    As far as I can see the published form is showing the correct font.

    I have cleared the form cache on your account.

    Please check again and let us know.

  • Profile Image
    radialinternal
    Answered on November 19, 2021 at 11:01 AM

    (FYI, font test page now at top of form for easy spot-checking.)

    Good thought about the form cache.

    However, the form is definitely not rendering in Poppins. Attached example shows diff between the lower-case "a" and the upper-case "Q", for example.

    Have loaded in multiple clean browsers (no cache) as well as a code inspector tool. Same results everywhere: it is Inter, not Poppins.


    1637337524_6197c9b4843c3_

  • Profile Image
    gerardw
    Answered on November 19, 2021 at 12:13 PM

    Thanks and sorry for the confusion.

    I can now see the difference.

    Upon testing it from my end on a demo form, it is not working as expected.

    Let me report this to our back end to check.

    Once there is an update we will let you know via this ticket.

  • Profile Image
    radialinternal
    Answered on November 19, 2021 at 12:34 PM

    Thanks Gerard!

  • Profile Image
    radialinternal
    Answered on November 30, 2021 at 09:53 PM

    Is there an update? This feature is broken and not working as advertised.

  • Profile Image
    Samuel_Ray
    Answered on November 30, 2021 at 11:01 PM

    Hi there,

    We still don't have any updates yet from our backend team.

    I'll send them a follow-up just in case. I also saw that your ticket is already marked as Important. Rest assured that we are working on its resolution at the fastest possible time.

    We appreciate your time and patience on this matter. Thank you!