Use ANY Font on Your Website!

[erisco]

Download: http://pack.abstractflow.com/php/dynamic_headers/dynamic_headers.zip

Requires PHP 4+ with the GD library. All instructions are in the script...

All you need to do is save the php file above on your web server. I would recommend making a new directory for it... fonts/ or something. To add more font support, stick .ttf files in the same directory as the php file.

Where can you get true type fonts (TTF) ?
http://www.webpagepublicity.com/free-fonts.html
http://www.1001freefonts.com/fonts/afonts.htm
(this should be quite a lot for you!)

Now you can have all the fancy headers you want :D To overcome indexing issues make sure to supply accurate ALTERNATE TEXT.

<img src="image.php?t=Hello+World!" alt="Hello World!" />

Real simple.

You can also work with these dynamic headers in CSS and javascript. Examples of how to do this are to come. You can even just use this script as a fast way to generate images. Feel free to simply right-click + save as...

Keep in mind this is meant for headers, not body text.

Special note... when passing parameters VIA get data, zero (0) will NOT be recognized. Use 1 instead, it is close enough :)

Friday, June 26th 2009: I, for whatever reason, forgot to come back here and update the post with the corrected version that includes input validation. Download is now from my server. Enjoy.

[johnz]

Good stuff erisco!! Thanks!

[erisco]

Now there is gif support, transparency support, and you can now specify colours in hexadecimal format. Problem with gif is that the transparency is not working properly, and transparency that is working inevitably leaves fuzzy bits around the text... however this is alright for making drop shadows and outlines ;) I do not have the new version posted yet as I want to work out the gif transparency issue.

Just a note, you can also use this in CSS if you want cleaner headers...

<h2>Hello world!</h2>
h2 {
background-image:url("img.php?t=Hello+world!");
text-indent:-9999em;
}


Tiled backgrounds will be difficult.. possibly intensive but I will work that out tomorrow hopefully. This is why I wanted to try transparency but the quality wasn't all that great, oops. I do have an idea to improve that quality.. though.

[-i-dont-know-]

Wow, nice. Much easier than making an image manually each time. Good work.

[erisco]

I agree -i-dont-know-. If anyone wants to also check it out, sIFR is another solution.. just google it.

Beta version up top now..

[erisco]

I have done research on projects similar to this (like sIFR but using PHP) and I found one that looked quite interesting. You were able to style the image by just using CSS.. very interesting indeed. I had a peek at the source and made the following discoveries...

1. The CSS did not really style the image.. the PHP was simply setup in order to parse the CSS. To avoid having to open and read the CSS file for every header image the information was stored in sessions (which now requires cookies)

2. Every page required the usage of PHP.. which of course is a hastle for anyone using a static site.. and the PHP that had to occur on each page had to be inserted at the top and bottom... even if you use includes, it is still a bit tedious. The PHP put on the page added the appropriate class attribute and on an advanced version it inserted spans (allowing for image wrapping). This is slow.

3. Styles could not be generated on the fly. You only have five header elements to work with and they absolutely must be the same over your whole site (as styling is stored in sessions).. however, what I have invented allows for any amount of different styling on any amount of different pages. Also, the capability with the CSS (unless using the version written by the other person) was limited as well.

The main discovery I made is that their system was simply a wrapper around their image file (like I have above.. but twice as long with LESS features ;) ). I could potentially write a more efficient wrapper only using ONE php file (one separate from the image) and some rewriting work... however, this introduces (potentially) undesired frameworking.. and could be difficult to integrate. In the end I decided it just was not worth it... a whole lot of extra mess just in order to specify styles in CSS instead of in a URL. It may *look* nicer on the client end but it is a mess for the server end of things. If anyone wanted to write a wrapper script to automate the image file URLs then so be it.. it just is not worth restricting people to it.

[GarrettW]

very interesting stuff. i think i'll have to stick this in my scripts folder. :)
and i'll be waiting for your new version!
now, to think up a cool name for it...
FontInject?
Anyfont?
nah, i'm no good ... see what you come up with!

[ascskate]

vedy, vedy nice Erisco. This is a great idea. I would've never thought of doing this.

Do you mind if I post this on another forum? giving your credit of course and a link to www.abstractflow.com (even though its under development) i know tons of people who would love this.

[erisco]

Oh, yes, sure asckate :) The more people who can use it the better. I think it is a really neat script myself (not to toot my own horn). You don't need to give a link to my site... perhaps when there is something there... which should be soon! ... gotta love school first though. bleh.

[t_ravichandu]

Works Cool erisco thank you very much.:)

[truefontfamily]

Hello,

Actually, there is another alternative now. I've created a similar script that uses JavaScript to fill out the parameters for you. True Font Family renders images through 100% CSS. It works on all major browsers (IE/Firefox/Opera/Safari) and when TrueType fonts are finally available you do not need to make any adjustments to your stylesheets.

Just add one line of JavaScript and you're done.
The JavaScript reads out the CSS style and replaces the textNodes with images created by PHP4+ and GD.

You can check out some examples online over at:

http://www.truefontfamily.com/?p=examples

It supports all text-related CSS formatting options including importing remote font files using CSS2 standard @font-face.

For more information and free download: http://www.truefontfamily.com/

(Please note that the free version has limitations and that there is also a professional version that is not free)

I'm not trying to spam here, just thought people might like to know.

[April Mendoza]

thanks for the info

[erisco]

That's need.

The purpose of what I did was to be independent from implementation, though, because one implementation will not suit everyone's needs. I could have automated things with JavaScript, but chose not to because some people may be conscious about those with JavaScript disabled.

On my site I posted about some various implementation opportunities. http://www.abstractflow.com/?p=4