title: Let the user choose a font
body: <p>Is there a way to let the user choose a font from their own computer with Javascript?</p>
  
  <p>Sorry if this sounds a bit basic, but I googled for it and all I found was hundreds of thousands of tutorials on how to use <code>style.fontFamily</code>. That, however, is not what my problem is. I already know how to set a font.</p>
  
  <p>I want to allow the user to set a certain piece of text to a certain font they can choose themselves. Like in <a href="http://jsfiddle.net/eTF93/1/" rel="nofollow">this fiddle</a>.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;p&gt;
     Type a font name: &lt;input id="font" /&gt; and click
     &lt;button type="button" id="button"&gt;here&lt;/button&gt;
  &lt;/p&gt;
  &lt;p id="example"&gt;
     And this is the text that will be displayed in the chosen font.
  &lt;/p&gt;
  </code></pre>
  
  <pre class="lang-javascript prettyprint-override"><code>document.getElementById('button').onclick = function() {
   document.getElementById('example').style.fontFamily =
    document.getElementById('font').value;
  };
  </code></pre>
  
  <p>Except I want the input to have a <code>datalist</code> that contains the font names on the user's computer. Or it can be a <code>select</code>.</p>
  
  <p>Some libraries look promising at first sight, such as <a href="https://github.com/CD1212/jQuery-Font-Chooser" rel="nofollow">"JQuery Font Chooser"</a>, but that too uses a preset list instead of using the actually available fonts.</p>
  
  <p>By now it almost looks as if fetching font names from the client computer is not possible...</p>