This JavaScript changes font family
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/fontselect.css" />
<script src="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/jquery.fontselect.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function selectFontAndApplyToEle(fontName, callback) {
$('div.font-select').find('.fs-results li').removeClass('active');
var dropEle = $('div.font-select').find('.fs-drop');
var fontToSelect = $('div.font-select').find('.fs-results li:contains(' + fontName + ')');
dropEle.addClass('fs-drop-op');
var posFont = fontToSelect.offset().top
var posFontOffset = $('div.font-select').find('.fs-results li:first').offset().top
$('div.font-select').find('.fs-results').scrollTop(posFont - posFontOffset);
fontToSelect.addClass('active').trigger('click');
setTimeout(function () {
$('div.font-select a div').trigger('click');
dropEle.removeClass('fs-drop-op');
callback && callback(fontToSelect.data('value').replace(/\+/g, ' '));
}, 500);
}
$(function () {
$('input.fonts').fontselect({
style: 'font-select',
placeholder: 'Select a font',
lookahead: 2
}).on('change', function (e) {
var fontFamily = $(this).val().replace(/\+/g, ' ');
$('#LabelName').css('font-family', fontFamily);
$('#LabelDate').css('font-family', fontFamily);
});
selectFontAndApplyToEle('Anton', function (fontFamily) {
$('#LabelName').css('font-family', fontFamily);
$('#LabelDate').css('font-family', fontFamily);
setTimeout(function () {
selectFontAndApplyToEle('Anonymous Pro', function (fontFamily) {
$('#LabelName').css('font-family', fontFamily);
$('#LabelDate').css('font-family', fontFamily);
});
}, 1000);
});
});
});
</script>
HTML
<div class="row">
<div class="col-md-12">
<div class="form-group">
<asp:Label runat="server">Choose Font</asp:Label>
<div class="input-group">
<input type="text" runat="server" class="fonts form-control" id="fonts" />
</div>
</div>
</div>
</div>
<div class="col-sm-9" runat="server" id="section">
<asp:Label ID="LabelName" runat="server" Text="Recipient Name"></asp:Label>
<asp:Label ID="LabelDate" runat="server" Text="Date"></asp:Label>
</div