Question

I’m creating a font tester online. I need people to type on a text input and get their text in a desired font which I’m changing with font-face. I’ll change fonts with addClass().

HTML

<p id="viewer"></p>
<input type="text" name="texto" id="texto" value="123" />​

jQuery

$('.texto').change( function(){    
    var str = $('.texto').val();
    $("p").text(str);
});​

This is the jsFiddle

Also, is there a something to protect font-face from being downloaded?

Answer 1

You need to use # instead of .. # is the id selector. . is the class selector.

You might also consider using keydown() instead of change() so the text will update in real time, and not just when they click away from the input.

http://jsfiddle.net/VeGCy/9/