non standard font scripting

SooTyLaD

SooTyLaD

SooTyLaD

Soldato
Joined
19 Oct 2002
Posts
3,480
hi :)

i have tried techniqies in the past to use non standard fonts on the web and pretty much always the results have been less than satisfactory... it was always delayed and looked very amateurish...

i came across this website:

http://www.1001fonts.com/fonts_over...full&filter=All&category_id=15&sort=font_date

and they seem to have an excellent font replacement system in place using php, but because its php i cant get access to have a nose...

does anyone have an inkling as to how this effect is being achieved? or how i can get access to see how they've done it? i'm very impressed :)
 
They are using dynamic image creation, most likely with GD library. It means that, using a custom written script in PHP, it can create an image using any font stored on the server (you could even add your own).
 
so is there any sort of open source version available to do it myself? i'm not good enough at programming to do anything like that but i would like to implement it...
 
you just need a webhost that supports php and gd/true type file support. you can just plonk the .ttf file in the same folder as the script and create the script like this.....

Code: 
<?php
header("Content-type: image/png");
$im = Imagecreatetruecolor(100,100); //create an image width, height in pixels
$font = "raavi.ttf"; //can be any ttf file
$fontsize = 10; //what it says on the tin

//now we need to define some colours to use.....

$white = Imagecolorallocate($im, 255, 255, 255); //any rgb values for the colour
$black = Imagecolorallocate($im, 0, 0, 0); //create as many colours as you need

Imagefill($im, 0, 0, $white); //colour in the whole image with your chosen colour

Imagettftext($im, $fontsize, 0, 2, 11, $tc, $font, "hello"); // this writes the text to the image. notice the 3 numbers - 0 is the angle - leave that alone for horizonatal text, 2 is the x co-ordinate in the image, 11 is the y.

Imagepng($im);
Imagedestroy($im);
?>

the last 2 lines output the image to the screen and tidy up. i'm using the exact same technique to power my lastfm sigs.... :)





 
thanks for the excellent replies guys... could i just clarify some stuff?

firstly, can i do this with a transparent background?

and secondly, i'm not big on php, how do i turn this into effiecient reusable code? i dont want to be writing all that ever time i need some funky text...

cheers :)
 
Last edited:
If you want to reuse that text, you need to create a seperate php file, then call it from an img tag in html with specific parameters. For example:

1. Create a new text file called "ci.php"
2. Copy the following into it and click save:
<?php

if ( $_GET["width"] && $_GET["height"] && $_GET["font"] && $_GET["size"] && $_GET["string"] ) {
$im = Imagecreatetruecolor($_GET["width"], $_GET["height"]);
$bg = Imagecolorallocate($im, 200, 200, 200); // Background color
$tc = Imagecolorallocate($im, 0, 0, 0); // Text color
$font = "fonts/" . $_GET["font"];
ImageColorTransparent($im, $bg);
Imagefill($im, 0, 0, $bg);
Imagettftext($im, $_GET["size"], 0, 3, ($_GET["size"] + 3), $tc, $font, $_GET["string"]);
Imagepng($im);
Imagedestroy($im);
}

?>
Click to expand...
3. Create a new folder called "fonts".
4. Put any fonts you want the image to use in that fonts folder.
5. In your HTML, call the script with:
<img src="ci.php?string=OcUK&font=tahoma.ttf&size=50&width=150&height=75" />
Click to expand...
The first "string=" part is the text to appear on the image, in this case I did "OcUK". The second part is "font=" which is the font name, remember to include the extension. The 3rd part "size=" is the font size. The 3rd and 4th parts "width=" and "height=" are obviously the width and height of the image.

Also I've add a part in the PHP function that makes the background transparent, through the use of "ImageColorTransparent()".

Should work :P
 
Last edited:
I'd opt for sIFR in this context as you just plug it in and go, no learning necessary. I don't see a point in doing a large amount of learning for this task, especially as you may not be regularly using PHP in the future or planning on taking it up; go for a pre-built solution.
 
Another vote for sIFR. It's all done by completely self-contained JavaScript, so your markup doesn't get butchered, and there's no need for server-side scripting. :)
 
You must log in or register to reply here.
Back
Top Bottom