Font Previews in <select> dropdown list?

Question

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.

Answer 1

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="comicSansMS">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 becomes selected is chosen by index (of the li).

References:

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

Answer 2

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