Font preview in dropdown list for html.dropdownlist MVC

Question

I'd like to implement a dropdown list that actually shows a preview for the type of selected font type. For example, Arial will displayed with "Arial" as the text but with the Arial font face. Any idea how I can go about accomplishing it? Right now my code looks something like this,

    <%=Html.DropDownList("ChartFont", new List<SelectListItem>
                     {
                        new SelectListItem{Text="Arial", Value = "Arial"}, 
                        new SelectListItem{Text="Calibri", Value = "Calibri"},
                        new SelectListItem{Text="Tahoma", Value = "Tahoma"},
                        new SelectListItem{Text="Verdana", Value = "Verdana"},
                        new SelectListItem{Text="Times New Roman", Value = "Times New Roman"}
                     }) %>

Any help is much appreciated guys!! Thank you!

You approach is wrong. You will not be able to offer previews because not all users will have all fonts installed. You can only make it bulletproof if using images, but that is not flexible. — Emil, Jul 12 '11 at 23:08

score 2 · Accepted Answer · answered Jul 12 '11 at 22:44

2

Try this:

<script type="text/javascript">
    $(document).ready(function () {
        $("#ChartFont option").each(function () {
            $(this).css("font-family", $(this).val());
        });
    });
</script>

answered Jul 12 '11 at 22:44

cinek

1,888
2
13
14

score 1 · Answer 2 · answered Jul 05 '11 at 07:10

1

Assuming you have this span (for preview):

<span id="preview"> Sample text </span>

Your jquery code would be:

$("#ChartFont").change(function(){
  var font = $(this).val();
  $("#preview").css("font-family", font);
});

And that's it! Hope this helps. Cheers

answered Jul 05 '11 at 07:10

Edgar Villegas Alvarado

18,204
2
42
61

This would help but im looking for the preview of the font within the dropdownlist if you know what i mean, not a separate text span. So Arial in the drop down list would be Arial with font face arial and tahoma would be with font face tahoma. – Hriskesh Ashokan Jul 07 '11 at 01:03
Basically, what you get in MS Word, for example – Hriskesh Ashokan Jul 07 '11 at 01:16

score 0 · Answer 3 · edited May 23 '17 at 12:13

I Guess in HTML select, option will not render font on browser, but u can apply font on optgroup, so place each option in diffrent optgroup (and make it visible false), and apply font to it (Tested on Chrome), then rendered HTML is like,

<select id="ddlFontDropDownList">
<optgroup style="display:none;font-family:Agency FB;">
<option value="Agency FB">Agency FB</option>
</optgroup>
<optgroup style="display:none;font-family:Arial;">
<option  value="Arial">Arial</option>
</optgroup>
----------
---------- and so on

In This way u can achive this, similar thing is done here, refer if u want to,

Font preview in dropdown list for html.dropdownlist MVC

3 Answers3