What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How do I override a template fonts so the form displays correctly in all browsers?

    Asked by teamhqs on January 08, 2015 at 10:39 AM

    I cloned one of the templates but have an issue with the form displaying on different browsers

    Refer to this link: http://www.teamhqs.com/index-4.html

    Open the page in the following browsers:

    Internet Explorer

    Firefox

    Google Chrome

    The fonts are completely different in all 3 browser and very difficult to read in Internet Explorer.  Firefox displays the font that is closest to what I want the form to look like.  I have spent several hours trying to override the fonts with no success.  Any suggestion on how to fix this issue?

    Thanks!

    Page URL:
    http://www.teamhqs.com/index-4.html

    template font
  • Profile Image

    Answered by Ben on January 08, 2015 at 01:49 PM

    Hi,

    I took a look at your jotform and I can see that there are several different styles applied to it.

    I also see that you have add the rules on your website that should apply to the jotform and based on them I would suggest these styles to be applied:

    Instead of (but you can leave it):

    .form-all, .form-all label, .form-all input, .form-all select, .form-all button, .form-all textarea {
        font-family: "Lobster",cursive !important;
    }

    To:

    *, html, body {
        font-family: cursive !important;
    }

    This would set the style for all fields and set the inheritance to the same ones.

    However if you have a lot of font related styles added with !important it might still be some fields that hold another value.

    Do however let us know how this goes and we would be happy to assist you if there are any further issues.I suggest taking a look at the following guide:Inject Custom CSS Codes

    Best Regards,
    Ben