As you might have noticed I've got I had a couple crazy “non-standard” fonts
from fontburner.com. FontBurner is a great tool for hosting sIFR
(scalable inman flash replacement)
file that displays it in the font of your choice. Currently fontburner has a
limited set of options regarding color/spacing etc. but with a little
ingenuity one is able to add this functionality themselves.
First let us look at how FontBurner works. When you goto their site choose
fonts, then which style of font to use. Once you’ve chosen a style you can
easily navigate through all the different type-faces, right below each example
is a ‘get the code’ button, which will give you this:
Now you copy that code onto your page & it will replace h1, h2, h3 tags and
any dom element with a class or ID the same as the font-name.
Ok, so now let’s do a little dissection & investigation…
Basically does the CSS image-replacement technique
Undoes the CSS image-replacement technique for print-only
The sIFR code itself
The motherload of hackability, this is where we will have our fun.
Attribution, let’s leave this in there because they deserve some credit.
Hey look, CSS, this is EXACTLY what we want, and editing this script will
give us much more control & options for fontburner. I suggest removing the h1,
h2, and h3 tags from the selectors string in line 9 of this code, you probably
shouldn’t put CSS on a tag itself unless you’re sure it’s necessary. Now lets
move down to that lovely CSS, here you can change the font color, text-
decoration, underling, weight, but there is a lot more you can do, hack away. So
now you can text-align and almost anything else in flash’s limited css.
Now you might have some code that looks like this:
And you will have khaki-colour center-aligned text with a non-standard font.