css - How to load custom font for a target div using jQuery -
problem: having textfield(with class "texttochange") can enter texts , having select field(with class "fontcustom") holds list of custom fonts.(all font files .ttf format stored in directory called "myfonts") , there div(with class "texttodisplay") display entered text loading custom font-family selected.
markup:
<input type="text" class="texttochange" /> <select class="fontcustom"> <option value="customfontfilename.ttf">custom font file name</option> <option value="customfontfilename.ttf">custom font file name</option> <option value="customfontfilename.ttf">custom font file name</option> </select> <div class="texttodisplay"> </div>
expected solution:
i expecting solution show entered text using custom font files directory(not google fonts) of jquery.
this how approach this:
- include webfonts in own css file. (e.g. font_1.css, font_2.css...)
- create class every webfont
- listen change event on select field selected font
$('select').on('change', function() { var fonttoload = $(this).val(); });
- load required css file
$('head').append(pathtocss);
- add css class
$('.texttodisplay').addclass('myfontclass');
Comments
Post a Comment