自定义字体预览

I am a font designer and want to create a similar custom font previewer like on dafont.com and myfonts.com

Those websites allow users to test a font with custom preview text. Also, I notice the preview text is generated as an image.

I have been working with a ifr.js tutorial on this website

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.

I am very new at coding, so please dumb it down for me :)

<script type="text/javascript">
function changeText2(){
var userInput = document.getElementById('userInput').value;
    document.getElementById('title').innerHTML = userInput;

if(userInput == ""){
    document.getElementById('title').innerHTML = "Testing...";
}
}
</script>

<script type="text/JavaScript" src="ifr.js"></script>
<input type="text" id="userInput" placeholder="Enter Text Here" />
<input type="button" onclick="changeText2()" value="submit"/>

<p class="title" id="title">Testing...</p>

Also, are websites like dafont or myfonts using something like I am trying to use or do they use something very custom?

Thanks in advance!....