sIFR Your Way to Better Headlines
- By Sven Lennartz
- Posted in How To's
- 0 comments
Typography can make or break any design piece across all realms of media: print, web, motion graphics, etc… Veteran designs will tell you that the devil is in the details with typography: kerning (the space between the letters), leading (the space between the lines), font weights, font sizes, small caps all of these working in unity will produce spectacular results.
Enter the Web…
Print designers making the transition from print to web soon learned that not all was what it seemed where web typography is concerned. As designers we are currently limited to roughly 16 web safe fonts.
- Arial
- Arial Black
- Comic Sans
- Courier New
- Georgia
- Impact
- Lucida Console
- Lucida Sans Unicode
- Palatino Linotype
- Tahoma
- Times New Roman
- Trebuchet
- Verdana
- Symbol
- Webdings
- Wingdings
Designers quickly began to see the problem with this, and put on their thinking caps to try and find a solution to a problem with no apparent answer. Mike Davidson came up with a technique while redesigning ESPN.com, that through inspiration of the works of others, like Shaun Inman, that he coined “sIFR” (commonly referred to as scalable Inman Flash Replacement). The full history of sIFR can be found in this blog entry by Mike Davidson and is worth the read.
sIFR is The Solution
sIFR is one the most mature font replacement solutions currently available to web designers for cross browser font rendering that degrades gracefully in browsers that don’t support Javascript (or have it turned off) or flash. sIFR works with a Flash file that contains the font you wish to use, a css file to set up some defaults and to handle the formatting if the user does not Flash or Javascript available, and a Javascript file containing your replace statements
When to Use sIFR
sIFR at it’s core is nothing more than a tool in a web developer’s toolbox. Knowing when to use sIFR properly will allow you to maximize its effectivness. The more elements you have on the page that are being replaced by sIFR, the more overhead is required for the Javascript to process all of the font replacements. sIFR is best limited to small chunks of text such as headlines, blockquotes, or other callouts.
While sIFR can be used with links, it’s best to not use it to style every link on the page, as sIFR links lose right click-ablitity as well as an inherit inability to display information in the status bar. sIFR should NOT be used for body copy, as the more text that sIFR has to replace the more memory/overhead it consumes and could lead to a troublesome browsing experience for the end user.
One of the added benefits of sIFR is that it’s fairly trivial to integrate with existing content management systems (Custom, WordPress, Drupal, Joomla, etc…) so website content publishers do not need graphic editing capabilities in order to create typographically sound headlines. In fact, sIFR was designed to be used as a supplement to content management systems by Mike Davidson when he first created the Javascript/Flash combo that would later become sIFR.
At the time Mike was working on ESPN.com, which had multiple authors in multiple locations all using one web based content managment system to manage their articles, but we’ve already talked about the history of sIFR
Summary:
- sIFR is best used for headlines or small chunks of text
- DON’T replace body copy (ie: primary page content)
- Prudent replacing of links is okay, but understand sIFR’s shortcomings with links
- Can be integrated into content management systems
How To Use sIFR on your Website
Download sIFR
Head over to sIFR’s official page where you’ll find a list of nightly builds For the purpose of this walkthrough I’m using: sifr3-r436.zip
What’s In the Folder
The sIFR download contains all the necessary files that you need to create your sIFR SWF and incorporate the proper Javascript and CSS. Not all of these files need to be copied to your websites folder. We’ll talk about which ones need to be copied as we go.
Creating our “Website”
For the purpose of this walkthrough we’ll create a very simple site that we’ll use sIFR to add custom fonts to. Here is a snippet of XHTML code for the homepage, as well as a screenshot of the folder structure that I’m using.
Note: Your folder structure may vary, so you might need to adapt the following instructions slightly.
Creating the Default Styles
Before we replace our text with sIFR we’ll want to take into account those users who do not have Flash installed/enabled or Javascript enabled. This really helps to showcase the power of sIFR and exemplifies how it degrades when neither Flash or Javascript is present
Add the following to your index.htm’s head tag
<link href="css/default.css" type="text/css" rel="stylesheet" />
Create a CSS file in the css folder and call it default.css
body{
color: #333;
font-family: Arial,Verdana,sans-serif;
padding: 30px;
}
a{
color: #b41313;
font-weight: bold;
text-decoration:none;
}
a:hover{text-decoration: underline;}
p{line-height: 28px; margin: 4px 0 20px 0; padding: 0;}
h1, h3, h4{
color: #007399;
font-family: Georgia, serif;
font-weight: normal;
margin: 0;
padding: 0;
}
h3{text-transform: uppercase;}
h3 span{color: #f60;}
We the above CSS, we are simply setting up our default font sizes and text colors. Typically you’ll want to make the text look as close as you can (color, size, etc…) to the sIFR text for users without Javascript or Flash enabled.
Creating the sIFR SWF
Start by opening the sifr.fla file from the flash folder that was bundled in your sIFR download. There will be a single MovieClip on the stage. Double click on it so you see something similar to the below screenshot:
Behind the scenes, sIFR uses the font that you declare in this MovieClip to render out the browser. One important thing to note is that if you plan to use a bold, italic, or bold italic version of the font, it has to be included in this MovieClip text. Use the Text Tool to select the text and change it to the font that you want to use on your website. For this example I’m using the font Rockwell. Don’t worry about the size or color of the font at this point, as we’ll handle that with our Javascript in a moment.
Once we’ve done this we’ll need to publish the file to our website’s folder. Go to File->Publish Settings, in the Formats tab, uncheck HTML. Change the publish name from sifr.swf to nameOfFont.swf. This is not a required step, but it does tend to help in organization if you decide to use sIFR with multiple fonts on your website. Click the folder icon beside the SWF file path and navigate to our website’s root directory. Click Publish to save out the .swf file and close Flash.
NOTE: the files do not have to be in the root of the website, typically it’s better to keep them in a seperate ‘swfs’ folder or something similar, however for the sake of this walkthrough we are going to publish to the root of the site.
Creating the sIFR Replace Statements
Now that our default styling is in place and our sIFR swf is created, we’ll create the Javascript replace statements needed in order to implement sIFR into our demo website. Copy sifr-config.js and sifr.js from the js folder in the sIFR download to the js folder of our demo website. We’ll include those into our demo site with the code below.
Add the following to your index.htm’s head tag
<script type="text/javascript" src="js/sifr.js"></script> <script type="text/javascript" src="js/sifr-config.js"></script>
Open the sifr-config.js file This file is heavily commented and does a good job of explaining what you need to do. For this demo, let’s highlight and delete the contents of the file so we are starting with a clean slate. Add the following code to your sifr-config.js file.
Add the following to your sifr-config.js file
var rockwell = { src: 'rockwell.swf' };
sIFR.activate(rockwell);
sIFR.replace(rockwell, {
selector: '.welcome',
css: '.sIFR-root {color: #007399; font-weight: bold;}'
});
sIFR.replace(rockwell, {
selector: 'h3',
css: '.sIFR-root {color: #007399; font-weight: bold;}'
});
sIFR.replace(rockwell, {
selector: 'h4',
css: '.sIFR-root {color: #007399; font-weight: bold;}'
});
Let’s take a look at this code step-by-step. The first line creates a reference to the SWF file we created previously. Note that if your path is different you’ll want to be sure to change it here as well, (ex: {src: ‘/swfs/rockwell.swf’}). The second line tells sIFR to activate this SWF. Now it is possible using sIFR to replace more than one font on your site. However, sIFR only allows for one ‘activate’ statement, if you find yourself in this scenario you’ll want to have your activate statement look something like the following:
var rockwell={src: 'rockwell.swf'};
var fontTwo = {src: '/path/to/fontTwo.swf'};
sIFR.activate(rockwell,fontTwo);
The next chunk of code contains our sIFR replace statements. There are many options you can pass to sIFR.replace and we are only looking the basics in this article. At it’s simplest usage sIFR.replace takes a font variable (we’re passing in ‘rockwell’) and a Javascript object containing various arguments including the selector and CSS to apply. In our first example we are using the selector of ‘.welcome’ which will select all elements using that class. In our second and third examples we are selecting by tag (h3, h4). However it is possible to select by id (#someId) or even by sub selection: (#someId h3).
The second argument in our config object is ‘css’. You can see here that it is applying styles to a sIFR-root class. This class is automatically placed on elements that have been selected using the selector in that replace statement. We’ll use this class to style of sIFR text. We can even use this argument to style links and sub tags in our selector, but more on that in a moment. You can see in each of our examples that we are currently only changing the font-color and font-weight properties.
We’ve done enough that we should be able to test this in a browser now. So upload this to your server or choice, or preview it locally and you should see something like the following:
We have successfully replaced our text with sIFR, but we are still seeing our regular HTML text as well as the sIFR text. We need to include the sIFR stylesheet that came with our sIFR download. This stylesheet has CSS declarations to hide our text, and in it’s place show the sIFR replaced text.
Note: It’s perfectly okay to include this code in your own stylesheet if you don’t want to keep it in a separate stylesheet. For the purposes of this article, we’ll keep it in a separate stylesheet.
Copy the css/sifr.css from the downloaded sIFR files to your website’s CSS folder. Let’s edit our demo sites index.htm file to include the following between the head tags.
Place this in the head tag of index.htm
<link href="css/sifr.css" type="text/css" rel="stylesheet" />
Now if you upload these files (or test locally) you’ll see only your sIFR text displayed in the browser. Essentially sIFR puts a class of sIFR-replaced on all the elements that are having their fonts dynamically replaced. This CSS file contains the styling necessary to hide these elements so they don’t show.
Styling your sIFR Text
You’ll see that our replacements aren’t perfect, we are missing some font colors, uppercase text, and our link colors aren’t showing up properly. Compare the two screenshots below.
Let’s start by cleaning up the h3 tag. In our example it should be in all caps and have the word sIFR in orange. We’ll handle this in our sifr-config.js file and use teh built in CSS support of sIFR. It currently doesn’t support all the aspects of CSS, but it does support a fair number of them. Here’s a full listing of styling in sIFR 3 Open the sIFR-config.js file and let’s make some updates
Change the h3 replace statement to be the following
sIFR.replace(rockwell, {
selector: 'h3',
css: [
'.sIFR-root {color: #007399; font-weight: bold; text-transform:uppercase;}',
'.orange{color: #ff6600;}'
]
});
We’ve added the square brackets to the css attribute to turn it into an array of CSS declarations. sIFR will take this and parse them out to a string that Flash can comprehend. We’ve added text-transform: uppercase to our .sIFR-root declaration, and created a new declaration called .orange to target our span with a class of orange inside of our h3. Note that if we were using an em or an a tag we could call the tag directly, but according the sIFR wiki, Flash won’t recognize a span tag referenced by tag, only by class or id. Also note that Flash doesn’t seem to support shorthand for colors. In pure CSS we could have written color: #f60, but Flash forces us to use #ff6600
Now that our h3 is properly styled we’ll want to examine the link that is inside of the h4 tag. We’ll use code similar to what is above. Edit your replace statement for the h4 tag to reflect the following changes.
Change the h4 replace statement to be the following
sIFR.replace(rockwell, {
selector: 'h4',
css: [
'.sIFR-root {color: #007399; font-weight: bold;}',
'a {color: #b41313; text-decoration: none; }' ,
'a:hover { color: #007399; }'
]
});
Just like our previous example using 2 colors, we’ve turned our css argument into an array. Into this array we pass styling for our a tag, and for the a:hover selector. It is also possible to pass in styles for a:active & a:visited as well.
On thing to note about styling links in sIFR is that sIFR won’t recognize a hover event on a link coded with an href=”", you’ll have to use an actual value, ex: href=”http://www.smashingmagazine.com”
Now that our styling is complete, we’re ready to upload this to our server (or test locally). When we do we should see our sIFR text styled just like we wanted it.
Tools & Resources for Use with sIFR
One of the drawbacks of sIFR is that it does require you to have a copy of Adobe’s Flash authoring program in order to create your font swf files. However the two tools below provide a way around that by providing you with a swf file without the need for Flash.
- sIFR Generator
Run by Richard Odekerken, web-based tool sIFR Generator allows you upload a TTF file and then download a swf file that contains the font you uploaded.
- sIFR Font Maker
Another option for creating your swf files without Flash is sIFR Font Maker by CoffeeCup Software. This Windows only application allows you to choose a font installed on your computer and it will create a swf file that can be used with sIFR.
- sIFR’s Offical Documentation
- Pros and Cons of Using sIFR
- An Introduction to sIFR via Adobe Developer Connection
- FontSmack – contains downloadable swfs created and ready to use for sIFR
- How to use sIFR with WordPress Themes (Without a Plugin)
- Set up sIFR with WordPress – NetTuts+ walkthrough
- WP sIFR – a WordPress plugin
- jQuery sIFR Plugin – jQuery wrapper / functionality for sIFR
- sIFR & MooTools 1.2 – Wrapper/Plugin for MooTools to use sIFR
- Font Burnder – have all of your sIFR text be served from an external site
- How To Use sIFR with Blogger.com
- sIFR Lite – compressed down, more object oriented Javascript rewrite of sIFR
- Grails Plugin for sIFR – use sIFR with GRAILS
- sistr – Silverlight version of sIFR
Other Font Replacement Options
sIFR is just one of many font replacement technologies available to web designers. Below is a list of other font replacement options, each with their own positives and negatives.
- CuFon – uses Javascript & VML to render fonts
- FLIR (Facelift Image Replacement)
- Typeface.js – uses Javascript & VML to render fonts (similar to CuFon)
- Nine Techniques for CSS Image Replacement – Chris Coyier of CSS Tricks discusses 9 different techniques for replacing text using CSS
How do the other options compare to sIFR?
sIFR vs. CuFon
| sIFR
Pros
Cons
|
CuFon
Pros
Cons
|
sIFR vs. FLIR
| sIFR
Pros
Cons
|
FLIR
Pros
Cons
|
sIFR vs. Typeface.js
| sIFR
Pros
Cons
|
Typeface.js
Pros
Cons
|
About the Author
Justin Johnson is Rich Media / UI Developer at E-dreamz an established Web Development company in Charlotte, NC. He spends his days meticulously hand crafting CSS and Javascript as well as tinkering with PHP, MySQL, SQL, ColdFusion & Flex. Justin spends his spare time with his wife and son.
