Ich habe eine benutzerdefinierte Schriftart und einen benutzerdefinierten Hintergrund für die Erstansicht der Dropdown-Liste festgelegt (Auswahl treffen). Dasfont-size beträgt 20 Pixel und sieht mit der benutzerdefinierten Schriftart großartig aus. Wenn ich jedoch auf die Liste klicke, verwenden die Optionen selbst nicht die benutzerdefinierte Schriftart und sehen normal aus, mit Ausnahme derfont-size, was zu übertragen scheint. Dies scheint nur bei Chrome der Fall zu sein (ich habe auch Safari und Firefox getestet).

<code>@font-face {
    font-family: 'Averia Libre';
    font-style: normal;
    font-weight: 400;
    src: local('Averia Libre Regular'), local('AveriaLibre-Regular'),
    url('http://themes.googleusercontent.com/static/fonts/averialibre/v1/rYVgHZZQICWnhjguGsBspHhCUOGz7vYGh680lGh-uXM.woff') format('woff');
}
select {
    font-size: 20px;
    font-family: 'Averia Libre', cursive;
    background: url(http://www.greenriverworks.com/elements/borders/green_button_background_over.jpg) repeat-x;
    width: 400px;
    font-family: 'Averia Libre';
}</code>

<code><link href='http://fonts.googleapis.com/css?family=Averia+Libre' rel='stylesheet' type='text/css'>
<select>
    <option value="">I'm a custom font.</option>
    <option value="">Hey me too!</option>
    <option value="">Averia Libre</option>
</select></code>

Ich habe versucht, eine separate Klasse für die Optionen selbst zu erstellen, aber das schien keine Wirkung zu haben.

Zur weiteren Veranschaulichung hier einJSFiddle.

Chrom:

Feuerfuchs: