Publishing System Settings Logout Login Register
TrueType Font PNG Image with PHP
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Add to Favorites
Posted on April 27th, 2011
PHP Coding

This is a quick tutorial to show how simple and useful it can be tocreate dynamic images with alpha channel from a PHP file. The concept issimple. We create a php file that will tell the browser it is an imagefile, ( "image/png" in this case ) instead of the regular text/htmlcontent type. Then we use some of the built in GD library functions touse a local TruType font file, along we some text we specify, and applythe font data to a new blank image.

You can find more info and downloads at this link.


Step 1

Create a php file called "gd.php" and save it in a folder along with a ".ttf" font file of your choice, for example..



Step 2

Add and edit this code in the gd.php file..

// Turn off PHP errors, Disable caching and set the Content-Type.

error_reporting( E_NONE );
ini_set( 'display_errors', '0' );

header( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
header( "Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . " GMT" );
header( "Cache-Control: no-store, no-cache, must-revalidate" );
header( "Cache-Control: post-check=0, pre-check=0", false );
header( "Pragma: no-cache" );
header( "Content-Type: image/png" );

// Setup some custom variables for creating our font and image.

$size= 48;// font size
$chars= 30;// prevent really long strings
$file= 'yourfont.ttf';// the text file to be used
$color= array( 192, 192, 190 ); // Color[ red, green, blue ]
$shade= array( 0, 0, 0, 1 );// Shadow [ red, green, blue, distance ]

// Get text string that is passed to this file and clean it up.

$text= ( !empty( $_GET['t'] ) ) ? trim( $_GET['t'] ) : 'PNG image';
$text= trim( strip_tags( html_entity_decode( $text ) ) );
$text= trim( preg_replace( '/ss+/', ' ', $text ) );
$text= ( strlen( $text ) > $chars ) ? substr( $text,0,$chars ).'..' : $text;

// Read the TTF file and get the width and height of our font.

$box= imagettfbbox( $size, 0, $file, $text );
$width= abs( $box[2] - $box[0] ) + 4;
$height= abs( $box[5] - $box[3] ) + 10;

// Create the blank image, alpha channel and colors.

$im= imagecreatetruecolor( $width, $height );
$alpha= imagesavealpha( $im, true );
$trans= imagecolorallocatealpha( $im, 0, 0, 0, 127 );
$fill= imagefill( $im, 0, 0, $trans );
$fg= imagecolorallocate( $im, $color[0], $color[1], $color[2] );
$bg= imagecolorallocate( $im, $shade[0], $shade[1], $shade[2] );

// Finally, we add the font and the shadow to our new image.

imagettftext( $im, $size, 0, $shade[3], ( $size + $shade[3] ), $bg, $file, $text );
imagettftext( $im, $size, 0, 0, $size, $fg, $file, $text );

// Output the image and do a little cleanup.

imagepng( $im );
imagedestroy( $im );


Step 3

use your new PHP script as a png image for creating things like header text or anything else you like. Your fonts will be displayed the same in all browsers because it's a PNG image. :)

<img src="/fonts/gd.php?t=String Here" alt="" />
<h1 style="background-image:url( '/fonts/gd.php?t=String Here' )"></h1>


Written by: Rainner Lins.

Dig this tutorial?
Thank the author by sending him a few P2L credits!


My name is, as the logo says, Rainner Lins. I work mostly in the development of web sites and other web and media applications, anything from programming, design, security, debugging to full on hardware repair and replacement, but also have a huge passion
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top