How to cutomize form fonts

  • Profile Image
    MxTraining
    Asked on November 10, 2017 at 03:09 PM

    I got this to work except for one thing. While designing the form everything is in your default font, looks like Helvetica. When I click on "preview form" it applies my font. This is good. But it would be better to design using the imported font. It's hard to design properly if not using the wanted font, particularly if the desired font is fixed-width (like Courier) but I have to design using variable width font.

    Do you have a solution?

    Thanks in Advance.



    This is a re-post of a comment on How to Use Google Fonts and Custom Fonts in your Form

  • Profile Image
    TREVON
    Answered on November 10, 2017 at 03:56 PM

    Thank you for contacting us. You can use  different methods supported on using fonts not in Jotform.You can use your font by injecting CSS to your form and using the desired font. You can use the guide below to inject custom CSS to your form.

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    You can also use CSS import font from a URL to customize your form.

    For instance if you have a link that has fonts that you need you can use CSS to a achieve this.

    @font-face {

    font-family: 'proxima_nova_rgregular';

    src: url('http://www.marketingandbranding.com.au/mdfp20141003a/fonts/proximanova-regular-webfont.eot');

    src: url('http://www.marketingandbranding.com.au/mdfp20141003a/fonts/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),

    url('http://www.marketingandbranding.com.au/mdfp20141003a/fonts/proximanova-regular-webfont.woff') format('woff'),

    url('http://www.marketingandbranding.com.au/mdfp20141003a/fonts/proximanova-regular-webfont.ttf') format('truetype'),

    url('http://www.marketingandbranding.com.au/mdfp20141003a/fonts/proximanova-regular-webfont.svg#proxima_nova_rgregular') format('svg');

    font-weight: normal;

    font-style: normal;}

    .form-all *{font-family:'proxima_nova_rgregular' !important;}

    The code above is very particular to the website so you can use the same concept to import font from a URL you want to use the font.

    Additional guide on importing font.

    https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

    I hope the solution above addresses the concerns you have raised.

  • Profile Image
    MxTraining
    Answered on November 10, 2017 at 08:43 PM
    Thanks for reply Trevon, but I’m not sure it addresses my question. Trying again…
    I successfully used CSS to bring in a Google font using the instructions I found on your site.
    @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
    .form-all * {
    font-family : 'Source Sans Pro', sans-serif;
    }
    After composing my form it uses the correct font as shown in screenshot below:
    But while I’m composing it uses a different font…
    Will using the method below allow me to compose my page with the correct font?
    Additionally, looking at the screen shots above, notice the word wrap on my only question. It wraps when viewing the form, but not when composing. Is this due to the font issue or something else. Would be nice to design in a more WYSIWYG style.
    Best regards,
    Erik
    ...
  • Profile Image
    liyam
    Answered on November 10, 2017 at 10:57 PM

    Unfortunately, it's quite difficult to interpret what you explain while the screenshots did not reach here in the forum. But following your explanation, I get to imagine what you are saying.

    The case may be is that the CSS code on the builder overrules the ones in your form so it most likely that it is having difficulty reading the CSS you have set without the priority ruling. On your CSS, can you add !important on the end of the font family declaration?

    .form-all * {
    font-family : 'Source Sans Pro', sans-serif !important;
    }