CSS Font-Family Support Dropped for <SELECT> in Firefox? - css

Question

The following CSS used to work in all browsers that I have tested. It even has an option selector to handle Firefox.
select,
option {
font-family: "Lucida Console", Monaco, monospace;
}
<select>
<option>PN-2345 The first element Hardware</option>
<option>Pn-1332-CFG Second thing Powdercoat</option>
</select>
The newest versions of Firefox no longer properly apply font family styles.
Former versions of Firefox, and every other major browser I've tested, fully apply the font family settings both to the select and to the items in the dropdown - now, it only gets applied to the select box itself, but NOT the dropdown.
Does Firefox still support font-family changes to dropdowns? If so, how?

Answer 1

I did some experiments, and apparently the font-family will render correctly in <option> elements as long as the font is installed locally. Which is obviously useless.
If anyone has any info disproving me, please tell us.

Answer 2

You can set the font for both the select and option elements in Firefox using:
select, option {
font: -moz-pull-down-menu;
}

Answer 3

Does this work? You can use this code if you want to :)
var ff = document.getElementById('sel');
function font() {
ff.style.fontFamily = "'" + ff.value + "', sans-serif";
}
select {
font-family: 'Overpass', sans-serif;
}
option#diff {
font-family: 'Ubuntu', sans-serif;
}
option#muli {
font-family: 'Muli', sans-serif;
}
option#over {
font-family: 'Overpass', sans-serif;
}
<link href="https://fonts.googleapis.com/css2?family=Muli:wght#300&family=Overpass:wght#300&family=Ubuntu:wght#300&display=swap" rel="stylesheet">
<select id='sel' onchange='font()'>
<option id='muli' value='Muli'>Muli yay</option>
<option selected id='over' value='Overpass'>Overpass hooray</option>
<option id='diff' value='Ubuntu'>Ubuntu is awesome</option>
</select>

Answer 4

My understanding is that Firefox delegates the rendering of options to the OS to some extent, so only fonts that are installed on the system can be applied. You can mitigate this for most cases by setting a fallback font or at least a generic family, like the code in the question does with , monospace at the end of the rule. That's how I interpret this comment from bugzilla.

Answer 5

-moz-font-family:"Lucida Console", Monaco, monospace;