PHP, GD, Fonts and headings
Post by: John - 06.11.2008 - Posted in PHP DevelopmentxHTML and CSS websites are by far the best means of delivering content in an accessible means to the user. But we are faced with restrictions of browsers, operating systems and user setups.
One common problem we come across as developers/designers is the limited amount of fonts we can safely use to display our content to the user because browsers rely on the user having the fonts specified installed.
However there is a way to allow your dynamic website to use rich fonts to provide users with the font/type you desire. The method I am going to explain is not by any means designed for large amounts of text.
We are going to use the PHP GD library to create an image using a True Type Font (.ttf).
<?php
// Set the content-type as a PNG image (allows transparency)
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
header('Content-type: image/png');
// The text to draw into the image
$text = $_GET['text'];
// The name of the font you want to use (this must be in the same directory as your file unless you specify a different directory
$font = 'HelveticaNeueLight.ttf';
$size = 50;
$width = strlen($text) * ($size - 1);
$height = $size + 10;
// Create the image 450px wide by 30 pixels high
$im = imagecreatetruecolor($width, $height);
imagealphablending($im, true);
// Create the text colour with alpha transparency
$alpha = imagecolorallocatealpha($im, 255, 255, 255, 127);
//create shadow colour
//$gray = imagecolorallocate($im, 155, 155, 155);
//create the colour of your text (R,G,B values)
$color = imagecolorallocate($im, 0, 0, 0);
//fill the background with the transparant colour
imagefill($im, 0, 0, $alpha);
// Add the text using the $red colour
imagettftext($im, $size, 0, 0, $size, $color, $font, $text);
// Add a shadow using the $gray colour
//imagettftext($im, $size, 0, 1, $size+1, $gray, $font, $text);
//save the alpha transparency
imagesavealpha($im, true);
// create the PNG
imagepng($im);
//destroy the $im from the memory
imagedestroy($im);
?>
You can find the example of this script here: http://www.thisisjohn.co.uk/samples/20081106/?text=Hello%20World
The method provides an effective means of producing simple headings using the font you choose without having to create an individual image for each heading within your website. As long as you apply alternative text of each of your images the usability of your website will not be decreased.
As you progress your knowledge you can start to put text within other images using the PHP GD library which provides a whole host of new applications.
To use fonts not installed within the GD library your PHP version will need to be compiled with the freetype library availably on most good LAMP hosting setups.
Useful resources:
http://uk3.php.net/manual/en/ref.image.php – PHP GD Library
http://www.freetype.org/ – freetype php library
