One of the reasons that designers often site for wanting to use Flash is that, unlike HTML, they can embed any font they want in their design. SiFR cleverly exploits that ability to replace HTML text with Flash text set in the desired typeface, giving the illusion that the font is rendered in HTML.
It works by using JavaScript to detect whether the browser has the Flash plug-in installed, and can then replaces indicated tags with Flash movies, using Action script to scale them to the appropriate size. If Flash is not installed, then it falls back to CSS styles.
Because sIFR can slow down page rendering, it has never been a suitable solution for all text on a page, but has a loyal following of designers who use it for display small bursts text, such as headlines.
One other obvious concern with using sIFR is that it requires you to have a working copy of Adobe Flash Pro in order to add the fonts to a SWF file that is then uploaded to your server. The good news, though is that there is an Web application—sIFR Generator— that not only eliminates the need for Flash, also makes the whole process much easier.
- Download the sIFR code
Start at mikeindustries.com/sifr/, which provides an introduction and instructions as well as a link to the most recent stable version of the code down at the bottom of the article. Download the most recent official release of the sIFR code that you will need to upload to an accessible spot on your server. I renamed this folder “sifr.” - Create the typeface SWF file
- Click “Make some sIFR Yourself,” upload your font file, click “Next”
- Choose the version of sIFR you will be using (look at the folder you downloaded in step 2 to figure this out), click “Next.”
- Choose the glyph set (font sub-setting), generally leave this on the default “Letters, digits and common other characters.” Click “Next.”
- Prove that you are a human by entering the correct text in the Anti Bot Validation. Click “Next.
- Review the font then click “Next.”
- Click “Download” and the SWF file with the font will be on it’s way to your computer for you to then upload to the Web server of your choice.
- Upload the files to your Server
sIFR uses several files to pull off its trick, and I recommend uploading the entire filed to your server as is, placing the SWF flash file you just created into it as well. - Add sIFR to your Web site
- To load fonts into your Web page, you will need to add some CSS and a bit of JavaScript
- Add a link to the sIFR screen CSS in every HTML file you want to add sIFR to. This file contains all of the code used to hide text to be replaced by the sIFR text, and sets a font size to creat a space the replacement text will fill. By default, this file only affects the header tags (h1-h5) but it can be edited to affect any tag or selector.
- Include a call to the sifr.js file in the head of every Web page you want to use sIFR in:
- Add the sIFR replacement function at the very bottom of your Web page, immediately before the closing body tag. This ensures that the text to be replaced has been loaded.
