sIFR

sIFR is a tool that replaces text elements in a webpage with some styled flash text. While there are some failings in the tool (currently version 2.0.2, with version 3 now in alpha testing) it is in general the only highly-supported way to use nonstandard fonts in webpages.

I have taken the time and effort to finally make sIFR work on this site; I tried it out a long time ago but ended up being confused. Actually, I'm still confused; when you replace elements, sometimes elements you have no interest in seem to be replaced, even though the generated source (not the original page source, but what's actually rendered) doesn't show any way that the styles should match those elements. I was forced to use more restrictive CSS in the sIFR style sheet than I liked, but it's working out okay so far.

All of this will eventually lead to a worthy sIFR-enhanced theme, which I will contribute to drupal. Even the website title is sIFR text, which is kind of a requirement for making the theme "lick and stick" on a variety of sites. Otherwise you have to cook up a header graphic, and that's what I was trying to avoid.

At this point the sIFR on the site is working more or less trouble-free except perhaps on IE6 where the site does not necessarily work properly at all. But one problem that still haunts sIFR is the need for Macromedia Flash. Many of us out here in webland see flash as a curse when it's integrated into a website rather than simply being used to embed certain types of animation content, and of course, those of us interested in freedom of information are annoyed when it's used for video - the user has a specific video player or specific video players installed to handle specific types of content because they want to use those players - sure, many or most people don't care, but it's still effectively peeing on their desires when they do, and solely to protect content that frankly cannot be protected from anyone who is actually determined.

However, there are ways to get around needing Flash. Well, actually there's one way, and it involves using SWFmill. There are however multiple ways to carry out this same task. You can do it manually on any platform supported by SWFmill (which is most of them) without any additional software. All you need is sIFR, SWFmill, and TrueType fonts. In the case that you don't have truetype fonts, you can make them with FontForge, a Free, Open Source software package for font editing. There's no native Windows version, but there is a version that runs on Cygwin, a Unixlike/POSIX.2 environment for Windows. You will need to install even the X Window System; You can start the X server with a shortcut to C:\cygwin\user\X11R6\bin\startxwin.bat.

Fontforge for win32 can be downloaded (as a single archive) then extracted, and finally simply run from the resulting directory. There are also Unix and MacOS versions; all versions are POSIX applications which use X11 for graphics. Open the font of your choice, then elect to generate fonts. Create a TrueType font; you can now use this with sIFR. I ran into this problem because a font we use at work is an OpenType font, and I wanted to use it for headlines on the website.

Those on Windows can use swfmill via the sIFR Font Embedder, a .NET 2.0 application which uses SWFmill. I extracted the font embedder to its own directory under C:\Program, a directory I use to store programs without installers - many of these are older programs, Win16 or DOS applications, and they sometimes do not deal well with long filenames. Then I extracted SWFmill and sIFR to locations inside that folder. Before using the program for the first time, it is necessary to specify these locations.

I haven't tried doing this the manual way, which I found on the sIFR forums:

I was able to get a custom font working with swfmill alone. It was a bit of a hack, but it worked! Here we go.

1) You'll need to download swfmill from the links above.

2) Create a file like the following to start. The examples use myfont.xml as the filename:

<?xml version="1.0" encoding="iso-8859-1"?>
<movie width="200" height="70" framerate="30">
<background color="#ffffff"/> <library> <font id="myfont" import="myfont.ttf" glyphs="abcdefghijklemnopqrstuvwxyzABCDEFGHIHJKLMNOPQRSTUVWXYZ1234567890"/> </library> <frame/>
</movie>

EDIT NOTE: The glyphs in the above can be omitted, and all characters will be included. However, this isn't a great idea, as the file size increases considerably if you do so. If that's a concern, then just use the ones you need. For example, if you plan to force sIFR to uppercase, then don't include lowercase characters. Also, remember to include other common characters, including . and a literal space, otherwise it won't be able to render them. Found this out the hard way ;)

Replace myfont and myfont.ttf with whatever you want. Expand glyphs as desired.

3) Run 'swfmill simple myfont.xml myfont.swf'

4) Run 'swfmill swf2xml myfont.swf temp1.xml'

5) Assuming you have the swf files that came with the sIFR 2.01 zip, run 'swfmill swf2xml tradegothic.swf temp2.xml'

6) Text editor time! I used vim, but you could even use notepad.

Edit temp1.xml and copy the entire section of ... (this will be a VERY long block)
Edit temp2.xml and remove the entire section in it between .... Paste the same section from temp1.xml

7) Run 'swfmill simple temp2.xml myfont.swf'. You should now be able to use myfont.swf in sIFR :) Hope this helps!

Or you could always just visit FontSmack and download a bunch of already-sIFR'd fonts.