title: Custom Font Preview
body: <p>I am a <code>font designer</code> and want to create a similar custom <code>font previewer</code> like on <code>dafont.com</code> and <code>myfonts.com</code></p>
  <p>Those websites allow users to test a font with custom preview text. Also, I notice the preview text is generated as an image.</p>
  <p>I have been working with a <code>ifr.js</code> tutorial on <a href="http://www.marcofolio.net/webdesign/use_a_custom_font_on_your_website.html" rel="nofollow noreferrer">this website</a></p>
  <p>However, I can't get it to work properly with custom text. The text changes, but it no longer displays as an image but as regular text.</p>
  <p>I am very new at coding, so please dumb it down for me :)</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
  function changeText2(){
  var userInput = document.getElementById('userInput').value;
      document.getElementById('title').innerHTML = userInput;
      
  if(userInput == &quot;&quot;){
      document.getElementById('title').innerHTML = &quot;Testing...&quot;;
  }
  }
  &lt;/script&gt;
  
  &lt;script type=&quot;text/JavaScript&quot; src=&quot;ifr.js&quot;&gt;&lt;/script&gt;
  &lt;input type=&quot;text&quot; id=&quot;userInput&quot; placeholder=&quot;Enter Text Here&quot; /&gt;
  &lt;input type=&quot;button&quot; onclick=&quot;changeText2()&quot; value=&quot;submit&quot;/&gt;
  
  &lt;p class=&quot;title&quot; id=&quot;title&quot;&gt;Testing...&lt;/p&gt;
  </code></pre>
  <p>Also, are websites like <code>dafont</code> or <code>myfonts</code> using something like I am trying to use or do they use something very custom?</p>
  <p>Thanks in advance!....</p>