Question

I am creating a font dropdown list on a web page. I have styled each option element with the font that it represents:-

<option value="Arial, Helvetica, sans-serif" style="font-family: Arial,Helvetica,sans-serif;">Arial</option>

When I expand the dropdown it looks correct but when I select an item, the dropdown does not use the font of the selected option. Is there a way I can make it update the font when selecting options?

jsFiddle – http://jsfiddle.net/bq2d9/

Answer 1

Try add:

onChange="this.style.fontFamily=this.value;"

http://jsfiddle.net/bq2d9/5/

Do note that the font in the drop-down displays properly in Firefox, but not in Chrome. However, after selection, both will display the text in the correct font.

Chrome does not support different fonts in each selection option.

---

To get a cross-browser font selector that displays the font of each option, you will have to get a plugin.

Looking at jQuery plugins, there are a large number. It is unclear exactly which of them support individual styling. I can find a few where options can be individually styled, however, they also can look ugly. For the ones which look better, it is sometimes hard to know whether they can be individually styled.

The best I can find is jQuery-Font-Chooser – https://github.com/CD1212/jQuery-Font-Chooser. It looks good enough, and response time is ok.

Otherwise, for other plugins, you can search, for example, “jquery select box” or “jquery font selector”.