I started creating my CSS in PHP to pull in page keys and other vars and GETs to create dynamic CSS. I have been having great success and is saving space in my vars files. I add a query to pull in page key and add type in the CSS header.

I found a solution for the web font problem that will help until downloadable fonts are available for all browsers, we replace text with images on the server side with PHP. I found this great example on PHP.net that will convert your text to a image on the server side, this is great when you have a CMS in place for a client that wants to change the page header copy that is a graphic of text that isn’t a web safe font.

Example:


<?php
$text = $_GET['text'];

// Set the content-type
header(”Content-type: image/png”);

// Create the image
$im = imagecreatetruecolor(330, 30);

// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 39, 91, 141);
imagefilledrectangle($im, 0, 0, 399, 29, $white);

// The text to draw
$text = ($text != “”) ? $text : ‘*’;
// Replace path by your own font path
$font = ‘./ttf/Aristocrat.ttf’;

// Add some shadow to the text
imagettftext($im, 20, 0, 11, 21, $grey, $font, $text);

// Add the text
imagettftext($im, 20, 0, 10, 20, $black, $font, $text);

// Using imagepng() results in clearer text compared with imagejpeg()
imagepng($im);
imagedestroy($im);

?>

Then to call the PHP into your page…

<h1><img src="h1.php?text=Header Text" alt="Header Text" /><span>Header Text</span></h1>

In this example I added the H1 copy into a SPAN, you do not have to do this but I want copy in my H1 for SEO reasons, I hide the SPAN copy from the screen with simple CSS.

SPAN { text-indent:-9999px;}