I've been looking around and there's really not much on how to make font previews (to show the text in the same font they're selecting) in a dropdown list. Can anybody point me in the right direction? Thanks.

I've been looking around and there's really not much on how to make font previews (to show the text in the same font they're selecting) in a dropdown list. Can anybody point me in the right direction? Thanks.

• javascript
• jquery
• html
• drop-down-menu

• Just HTML, if it needs to be done in jQuery or JavaScript that would be fine. – Jared Commented Mar 16, 2011 at 18:23
• 2 You will need a Javascript-powered select control to make this work across browsers. Only the modern ones accept individual styling on <option>s, and I'm not sure whether font-face is supported at all – Pekka Commented Mar 16, 2011 at 18:29
• Does it have to be a real select element? Or would a styled ul, or similar, be okay? – David Thomas Commented Mar 16, 2011 at 18:48
• Well as long as a javascript form can get the value of the ul by it's ID (and the value will be a font name), I don't see why it couldn't be a ul. – Jared Commented Mar 16, 2011 at 18:58
• 2 I've been writing up a test, and Pekka's bang on. Firefox 3.6 has no problems rendering the font-family, but IE 8 won't render it on the option tags even if I create a dynamic style sheet. You'll have to fake a select menu. – user1385191 Commented Mar 16, 2011 at 19:04

2 Answers 2

To offer an alternative to using only a select element, that will allow for styling the font, and applying other css, while updating a traditional select element for submission to the server/script:

html:

<form action="#" method="post">
    <select id="fontSelector" name="fontSelector">
        <option value="calibri">Calibri</option>
        <option value="Times New Roman">Times New Roman</option>
        <option value="Comic Sans MS">Comic Sans MS</option>
    </select>
</form>

<ul id="fontList">
    <li id="calibri" class="selected">Calibri</li>
    <li id="timesNewRoman">Times New Roman</li>
    <li id="icSansMS">Comic Sans MS</li>
</ul>

jQuery:

$('#fontList li').click(
    function(){
        var chosen = $(this).index();
        $('#fontSelector option:selected')
            .removeAttr('selected');
        $('#fontSelector option')
            .eq(chosen)
            .attr('selected',true);
        $('.selected').removeClass('selected');
        $(this).addClass('selected');
    });

JS Fiddle demo.

Notes:

1. This assumes that that the order of the li elements will be the same as the order of the option elements, since the option that bees selected is chosen by index (of the li).

References:

1. click().
2. index().
3. removeAttr().
4. eq().
5. attr().
6. removeClass().
7. addClass().

You might want to use the HiGoogleFonts.

It doesn't load all the fonts as you scroll. It only loads the fonts that are clicked. For font preview , It is using a single image which loads very fast . It has 700+ fonts

Download it from github

See demo here