24

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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The first element&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hardware</option>
  <option>Pn-1332-CFG&nbsp;&nbsp;Second thing&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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.

Select box with partial support for the font (here shown in Impact). Note the items are not showing the proper font.

Does Firefox still support font-family changes to dropdowns? If so, how?

8

5 Answers 5

10

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.

1
  • 4
    It seems you are correct and it will only show the font if it is installed locally. All you can do is make the font stack as good as possible, so you atleast have a decent fallback font. Jun 30, 2021 at 9:49
8

You can set the font for both the select and option elements in Firefox using:

select, option {
  font: -moz-pull-down-menu;
}
1
  • 2
    I tried this and it did the opposite of what I wanted. I've got a dropdown in Firefox that the menu is the correct font, but the dropdown options are different. But now instead of applying the CSS font-family property from my stylesheet to the options it is also removed from the menu entirely!
    – mlibby
    May 9, 2021 at 19:53
2

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>

1
  • Nope, the snippet presents the same error in Firefox =(
    – Scorer
    Jun 3, 2021 at 17:09
1

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.

-4
-moz-font-family:"Lucida Console", Monaco, monospace;
1
  • 4
    Please add some explanation to your answer such that others can learn from it
    – Nico Haase
    Apr 2, 2019 at 14:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.