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

  • Profile Image
    Asked 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:

    Open the page in the following browsers:

    Internet Explorer


    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?


  • Profile Image
    Answered on January 08, 2015 at 01:49 PM


    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;


    *, 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,