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.
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:
<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>
$('#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:
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:
click()
.index()
.removeAttr()
.eq()
.attr()
.removeClass()
.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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With