Unfortunately I also had to deal with issues when using PHP & GDLib for generating headline graphics. I use TYPO3 as CMS for most of my projects. It can create graphical headers and leverages GDLib for it. I had to struggle with quality issues: on my local dev machine (osx), the font was rendered in superb quality, on the production server (gentoo), it was blurry and to "thin". I dont know if these differences were because of the different platforms or because the PHP/GDLib versions were slightly different. I also encountered problems like yours, especially when the web host was upgraded to a newer PHP version. Yesterday the headlines looked good, after the update, the chars were misplaced, umlauts were missing etc.
A serverside alternative could be imagemagick. This small PHP snippet creates a sample image (assuming the Bleeding_Cowboys.ttf is in the same dir as the script):
<?php
$currentDir = dirname(__FILE__);
$fontPathname = $currentDir . '/Bleeding_Cowboys.ttf';
$cmd = ' convert -background white -fill black -font "' . $fontPathname . '" -pointsize 23 label:"The quick brown fox jumps over the lazy dog" ' . $currentDir . '/headline.png';
exec($cmd);
print '<img src="headline.png" alt="" border="0" />';
The image looks like this:
You probaly need to adjust the font size a bit using another value for the -pointsize 23 argument.
I used this IM version on windows:
ImageMagick 6.5.4-6 2009-07-25 Q16 OpenMP
Read more about imagemagicks text handling capabilities here: http://www.imagemagick.org/Usage/text/
Although Imagemagick is a quite common package now, there are still hosts that dont have IM installed. But you can download a statically compiled IM version which you just upload via FTP in some directory, make the binaries writable and then you can use it to generate your images. I found a tutorial on how to do this, unfortunately in German only, but I am sure you can grasp the basic idea from the shell commands provided: http://www.website4all.de/support/support-typo3/imagemagick.html
Although Imagemagick is a viable option, I finally used client side javascript in order to create graphical headlines with embedded fonts.
First, I stumbled upon sIFR ( http://wiki.novemberborn.net/sifr/ ) which replaces html content with flash objects in order to render the font. Although it looked promising at first, I dumped it because:
- the website gets really slow if you have many elements to replace
- the setup is a bit of a hassle
- it relys on flash, the headlines wont work on iPhone or iPad
I would have created a sample for you, but I dont have Adobe Flash CS installed on my laptop.
Anyway, I finally found a good client side javascript lib, that did what I wanted: Cufon ( http://cufon.shoqolate.com/generate/ ). You upload your ttf file to that service and then use the created javascript file along with the Cufon base library in order to replace the headline elements with graphical headlines. Cufon uses the canvas element in order to do this. Read more about how its done on http://wiki.github.com/sorccu/cufon/about
What I really like about Cufon:
- works on all major browsers, including IE 6 (and above)
- works great on iPhone and iPad
- very fast, even with many headlines
- very easy setup
The only real concern I have about Cufon: licensing. This may be an issue especially with commercial fonts. Not all font creators allow this kind of embedding. If in doubt, always get written permission.
But anyway, a simple HTML site using Cufon might look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" src="cufon.js"></script>
<script type="text/javascript" src="Bleeding_Cowboys_400.font.js"></script>
<script type="text/javascript">
Cufon.replace('p', {fontFamily: 'Bleeding Cowboys'});
</script>
<style type="text/css">
p {
color:#000;
font-size:23px;
}
</style>
</head>
<body>
<p>The quick brown fox jumps over the lazy dog</p>
</body>
</html>
The resulting headline image looks like this:
As you can see in the source code of the html site, you define font size (probably need to adjust this, too) and color via CSS. And then you call Cufon.replace('p', {fontFamily: 'Bleeding Cowboys'}); in order to tell Cufon to replace what (in this case all p elements) with what font family (in this case, Bleeding Cowboys).
I know, these are no direct answers to your question, but client side headline creation gave me very good results with way easier setup and code then with all the serverside solutions I tried. If I were you, I would either give sIFR or Cufon a shot, although IM might be worth a try beforehand, especially if you are restricted to a serverside solution.
