How to change iframe embed form field's font styles

Hi

We have inserted an iframe embed form into the black bar on homepage, however we are unable to style all the form field fonts.

We want all form fields i.e. dropdown, calendar, text input to be a consistent font-family, weight, color, how do we do that? We have tried in all the settings and the CSS section but nothing seems to be working.

We are waiting to launch the site asap so a fast reply would be very much appreciated! :)

URL: http://charonneruthglass.myshopify.com/ 
FRONTEND PASSWORD IS: test

For the entire form, you have to inject the following custom CSS codes:

.form-all {

font-family: cursive !important;

font-weight: 700 !important;

color: #000 !important;

}

For the placeholders, you can inject the following:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */

font-family: cursive !important;

font-weight: 700 !important;

color: #000 !important;

}

::-moz-placeholder { /* Firefox 19+ */

font-family: cursive !important;

font-weight: 700 !important;

color: #000 !important;

}

:-ms-input-placeholder { /* IE 10+ */

font-family: cursive !important;

font-weight: 700 !important;

color: #000 !important;

}

:-moz-placeholder { /* Firefox 18- */

font-family: cursive !important;

font-weight: 700 !important;

color: #000 !important;

}

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

 

For the Checkbox in Dropdown and Date Picker widgets, you have to inject the following in the CSS area of the widget:

body {

font-family: cursive !important;

font-weight: 700 !important;

color: #000 !important;

}

 

Just change or add your own styles. 

Let us know if you need further help.