Custom font-family Roboto For Embedded Form

[douglaskarr]

I have a client that uses Roboto as the font-family for their form buttons. Marketo states that it supports Google Fonts, but Roboto is not a choice within the dropdown. I have tried CSS with !important in the Edit CSS and have also tried to set this at the destination page where the form is embedded... but the font-family simply won't change. I even tried to write some jQuery on document ready to modify the font-family... but it still doesn't impact it. Any assistance would be appreciated!

/* Add your custom CSS below */
.mktoForm button.mktoButton {
font-family: "Roboto", sans-serif !important;
}
.mktoButtonRow {
margin-top: 8px !important;
}
.mktoButton {
border-radius: 6px !important;
background-color: #308AE8 !important;
border-radius: 6px !important;
color: #ffffff !important;
font-size: 15px !important;
padding: 8px 24px !important;
font-weight: 600 !important;
text-align: center !important;
-webkit-transition: all .3s !important;
-o-transition: all .3s !important;
transition: all .3s !important;
border: none !important;
}

.mktoButton:hover {
color: #FFFFFF !important;
background-color: #FF3567 !important;
}

[SanfordWhiteman]

Custom webfonts work fine, no JS is necessary. But you haven't shown how you're including the webfont itself. Or you could link to a page with your form + CSS.

(Also, DOMContentLoaded/readyState isn't interlocked with Marketo form events anyway, so you can't just wait for the DOM to be ready, you'd have to wait for the form to be ready. But that isn't necessary anyway!)