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:

  1. include webfonts in own css file. (e.g. font_1.css, font_2.css...)
  2. create class every webfont
  3. listen change event on select field selected font $('select').on('change', function() { var fonttoload = $(this).val(); });
  4. load required css file $('head').append(pathtocss);
  5. add css class $('.texttodisplay').addclass('myfontclass');

Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -