paulzee on "[Plugin: Jetpack by WordPress.com] Jetpack Contact Form: strange corruption in dropdown field list values"

What happens when you remove your hacks to the contact form file, and try to customize the look of the form with another font, either with font-face or with a web safe font? Do you experience similar issues?

I don't know how to customise the form directly when editing a Page in WordPress admin (I'm assuming that's not possible using the shortcode format the form uses?)

As I noted earlier, when I suspected it might be the @font-face font, I started by overriding the font for the <select>:

<select name="g135-whatprimarytypeofsupportwouldyouliketodiscuss" id="g135-whatprimarytypeofsupportwouldyouliketodiscuss" class="select">

by modifying the stylesheet.css to remove liberation-sans

.contact-form select {
	font: 12px <del>liberation-sans,</del> 'Droid Sans', 'Helvetica Neue',
	 	    Helvetica, Geneva, Sans-serif;
}

and that highlighted where the problem was, and a path to a workaround.

The problem is that changing the CSS for .contact-form select modifies the whole block that is wrappered by the select: the selected entry as well as the options list.

The options themselves won't accept a font styling directly. To fix the options, but not effect the select itself, I introduced the <optgroup> wrapper as an intermediate styling hook.

<select name="g135-whatprimarytypeofsupportwouldyouliketodiscuss" id="g135-whatprimarytypeofsupportwouldyouliketodiscuss" class="select">
		<optgroup label="Choose one of the following:">
			<option>(no option selected)</option>
			<option>Volunteer</option>
			<option>Sponsor - Donation</option>
			<option>Sponsor - Exhibiting</option>
			<option>Other</option>
		</optgroup>
	</select>

For the project I'm working on, I want to use an open font, not just a web safe font. Ideally, I want to use @font-face to offer the most flexibility.

So:
- customising the select and setting an alternative web safe font ('Droid Sans') resolves the display corruption, and doesn't require the hack. However, it leaves the displayed select field and its chosen value "orphaned" from the rest of the form in a different font.
- To just fix the corrupted dropdown display of the options requires the optgroup element wrapper to be introduced. I don't believe the option element can be font styled directly.
- I could investigate whether there is a problem with my font-face files, however I'm not certain where to start. Should I just regenerate them, e.g. using font squirrel?