Font Selection with live preview like dafont.com

Question

I would like to integrate a feature into a form on a site I am working on much like fonts.com and dafont.com and I have looked everywhere using every search term imaginable trying to figure out where to even begin. Here is what I'd like:

User chooses font by name in a drop down list. They can then put there custom text in a form field which will preview in its true type form so they can see what their font will look like.

Basically I want to copy how the font choosing sites allow u to pick your font.. preview it and in my case submit the font choice with the form along with other form data.

Can someone at least point me in the right direction. I am stumped. I think i am overthinking this but its a feature a client is desperate for.

Answer 1

You can render a font in a library like ImageMagick (widely available across PHP installations):

$im = new Imagick();
$im->setFont('YourFont.ttf'); // Set the correct file path here
$im->newPseudoImage(100, 100, 'caption:Hello');
$im->setImageFormat('png');

header('Content-Type: image/png');
echo $im;

Then you can attach a javascript event to the font selection dropdown (and/or the sample text input), and every time it's changed, set the source of an image to this PHP script to preview the result in real time.