Using sIFR (scalable Inman Flash Replacement) to replace standard web fonts on our web projects has become a de facto standard for us. Since I use it so often, I wrote a quick tutorial to show you how to get sIFR up and running.
This tutorial is geared toward both the novice user installing sIFR for the first time and to those who have done it many times before. If this is your first time working with sIFR, you should know a few things before getting started:
- To work with sIFR and follow along here, you’ll need Adobe Flash.
- sIFR requires both JavaScript and Flash to work. In the absence of either, it will fall back to displaying regular text.
- Don’t try testing sIFR locally, or nothing will work. It needs to run on a server, either remotely or on a local XAMPP install.
- sIFR is not intended to replace large blocks of text. Try to use it sparingly, for headers and small snippets of copy only. Too much sIFR will bog down your site, increasing page load times.
1. Accommodate those without JavaScript
The very first thing you should do is to make sure your to-be-replaced text looks correct before using sIFR to replace it. If you don’t do this now, you’ll spend more time later switching between your sIFR text and your regular text (they end up using different stylesheets) to make sure they both look right. It’s better to take care of the non-JavaScript people first.
When you’ve gotten your text where you want it, move on to step #2.
2. Download the sIFR files
Download the latest version of sIFR and unzip it somewhere on your computer. For this tutorial, we’ll be working with sIFR release 436.
3. Open sifr.fla
When you unzip the sIFR archive, you’ll see four folders: css, demo, flash, and js. You can completely ignore the demo folder. Click into the flash folder and open sifr.fla.
4. Modify sifr.fla
Once you’ve opened sifr.fla, you should see something like this:
The white rectangle in the middle is called the stage or the canvas. Double click it and you’ll see this:
Double click the stage again to select the text inside. Delete everything, then type a single character (glpyh) of your choice for each font style you’d like. For instance, if you only need normal and bold styles, enter two glyphs: one for normal and one for bold. Make sure all of your glyphs are the same letter.
Of course, you’ll have to choose a font that supports all of the styles you need. In this tutorial, I’m using Arno Pro, which has bold, italic, and bold italic glyphs.
5. Choose your font
Select all of your glyphs, then look to the right of your screen for a dropdown menu like the one highlighted below:
All of your characters will now be the default “normal” style of the chosen font. If your font supports additional styles, the “Style” menu will be active. Highlight each individual glyph you want to change, then choose a different style from the dropdown. In the example below, I’m about to make the second glyph italic:
For fonts like Arno Pro, which have tons of glyph styles, you may be tempted to pick a “caption” or “extra wide” style. These will not work, since HTML only supports normal, bold, italic, and bold italic.
TIP: If you only need to display one style on your site, then you only need one glyph on your stage. I.e., if you only want to display bold, then type one glyph and bold it. You don’t need any more than that.
6. Add additional glyphs
If you anticipate using special characters (for example, Ñ, β, £, «, ™), you’ll need to embed them in your Flash movie. Right beneath the menus you just worked with is a “Character Embedding” button which, when clicked, pops up a window like this:
The basic glyph sets are already chosen for you, along with a list of extra characters. Choose the additional character sets you want (if any) or type special characters in the list, then click OK.
7. Publish your movie
When you’re happy with your font, go to File › Publish Settings. Untick the box near “HTML” since we won’t need to output any HTML files. Next, click the “Flash” tab near the top to adjust your settings.
The only setting you should change is JPEG quality. I always set it to 100, since there’s almost never a difference in file size between 80 and 100. This ensures your replaced text looks as good as possible. You can, of course, adjust this setting to try and reduce the size of your Flash movie.
Once this is set, click Publish.
8. Rename your movie
Go back to the folder that has your sIFR files and click into the “flash” folder. You should now see a sifr.swf file, which is the movie you just published.
It’s good practice to rename your movie after the font it contains, since it’s not uncommon to replace more than one font on a website. This naming convention will make it easy to know what’s what.
I renamed my movie arnopro.swf.
9. Open sifr-config.js and configure
Now it’s time for the hearty, meat-and-potatoes part of the tutorial. You’ve got your movie; you just need to tell your site where to find it and what to do with it.
Go to your sIFR folder, click into the “js” folder, and open sifr-config.js.
There are instructions in the file, but here are the basics:
- On line 15, change the variable name to match your font’s name and change the path to point to your swf file. For example:
// what you see when you open the file var futura = { src: '/path/to/futura.swf' }; // an example of what you should change it to var arnopro = { src: 'http://www.3roadsmedia.com/flashstuff/arnopro.swf' };
- Now is a good time to upload everything to a web server so you know the path to your movie. You won’t be able to test sIFR by just calling the movie from your hard drive.
- Do a find/replace to swap out all instances of futura with the name of your new font.
- Tell sIFR how to display your new font by adding CSS selectors and style rules (see the next step)
10. Tell sIFR how to display your new font
All of the styling for your Flash-based font is handled via sifr-config.js, starting on line 53.
A couple of pointers:
- Be sure the font name after sIFR.replace matches the name you specified in line 15
- The “selector:” tells sIFR which HTML element to target with the style rules. sIFR supports most HTML elements, but if you want to target things like :first-child, read this article on how to do it.
- You can target multiple selectors at a time by using a comma-separated list; e.g.:
selector: 'h1, h2 a, #footer h3',
- When using hex colors, always use the full six digits. Three-digit CSS shortcuts do not work here. For instance, use #003300, not #030.
- If you’re getting a funky colored box behind your replaced text, add this line to each of your selectors:
wmode: 'transparent'
- To style hyperlink hover behavior, do something like the following:
css: [
'.sIFR-root { color: #000000; }',
'a { color:#9f2321; text-decoration:none; }',
'a:hover { color:#99e232; text-decoration:underline; }'
]
11. Include the sIFR files in your web page
For this tutorial, I’m assuming you already know how you want to style your font, so you can configure first and hook up second (sounds like I’m inviting some derisive snickering…).
sIFR requires 3 files to work: sifr.css, sifr.js, and sifr-config.js.
Add these files to the <head> section of your web pages by copying/pasting this:
<!-- sIFR files --> <link rel="stylesheet" type="text/css" href="http://path/to/sifr.css" /> <script type="text/javascript" src="http://path/to/sifr.js"></script> <script type="text/javascript" src="http://path/to/sifr-config.js"></script>
12. Upload everything and test
Upload everything to your web server and load your web page. If all went as planned, you should see your new font instead of that old, dreary thing you’re replacing:
If you don’t see your new font, go through this checklist:
- Double check the paths to all of your files.
- If your JS files are linked properly, make sure you entered the right path on line 15 of sifr-config.js.
- If that’s linked properly, try to load the Flash movie directly. If you don’t get anything, you may not have Flash installed or it may be turned off.
- Make sure JavaScript is enabled in your browser.
Once you’ve got your replaced font showing, tweak your CSS in sifr-config.js until things are exactly where you want them.
13. Tweak the CSS
The final step is to tweak your replaced text. You may notice it’s a bit off in some places, or that it wraps in the middle of a word. The solution is to edit sifr.css, which is located in the “css” folder of your sIFR download.
Once you’ve opened that file, scroll to the very bottom, where you’ll see this:
@media screen { /* Example: .sIFR-active h1 { font-family: Verdana; visibility: hidden; } */ }
This is where you make your edits (you can leave the rest of the file alone).
A common fix you may need to implement is preventing your replaced text from wrapping in the middle of a word. This is caused by the replaced text taking up less space than the sIFR text. The solution is to increase the font size, letter-spacing, or width of the replaced text. If you do this in your regular CSS file, you may find that your regular (non-sIFR) text is too large.
In this case, you’d create a new rule in your sifr.css file to make the font larger only for the replaced text; e.g.:
// regular CSS file h1 { font-size:20px; } // sifr.css .sIFR-active h1 { font-size:28px; visibility:hidden; }
Regardless of whether you edit sifr.css, you must include it in your <head> section.
Post script: frequently asked questions
You’ve got sIFR up and running, but something isn’t acting quite right? I’ve compiled this short list of questions that I’ve seen asked many times before:
How do I adjust line-height in sIFR?
Flash doesn’t understand the concept of line-height. Instead, it uses a custom property called leading. To adjust the line-height in sIFR, do this in your sifr-config file:
// leading must be a number (decimals allowed); no units needed
css: '.sIFR-root { color:#5a3b00; font-size:25px; leading: -3; }',
How do I style links in sIFR? My cursor doesn’t work.
A common problem with sIFR-replaced links is that your cursor doesn’t appear as the friendly hand pointer, but as a text selector. This is because you haven’t replaced the link, but the text inside the link. Read here for how to fix this.
That’s it!
If you have suggestions for improving this tutorial, or if you get stuck, feel free to leave a comment. You can also post a question at Stack Overflow where Mark Wubben (lead sIFR developer) is great at answering questions.
You can skip to the end and leave a response. Pinging is currently not allowed.
Post a Comment