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

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!

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