Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Font Previews in <select> dropdown list?

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.

like image 483
Jared Avatar asked Mar 16 '11 18:03

Jared


2 Answers

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().
like image 60
David Thomas Avatar answered Oct 19 '22 01:10

David Thomas


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

like image 32
Saadi Avatar answered Oct 19 '22 00:10

Saadi