Demo - Using sIFR for Flash Font Replacement
|
|
| Share this page: |  |
 |
 |
 |
 |
 |
 |
 |
 |
 |
Use sIFR 3 - Easy and Slick Flash Font Replacement
The above <h2> heading is a flash movie using sIFR (scalable Inman Flash Replacement). So easy, so pretty... and it's SEO friendly! Below I've outlined the ridiculously simple steps to implement this technique on your website. You'll need a recent version of Adobe Flash (I used Flash CS4) for about 5 minutes to export your font-specific movie.Go Download sIFR 3 at novemberborn.net
The above <h3> tag is also a flash movie.Head on over to Mark Wubben's website at novemberborn.net/sifr3 to download sIFR3 and look over the documentation.
Create the Flash movie
Open the downloaded sifr.fla, double-click the text area, enter your text (and select the desired font, which must be present on your machine), and export as [fontname].swf.Modify the sifr-config.js
Modify the sifr.config to point to your flash movie, declare the tags within which to replace text, and designate font colors.
var copernicus = { src: '/sifr/Copernicus.swf' };
sIFR.activate(copernicus);
sIFR.replace(copernicus, {
selector: 'h2',
css: '.sIFR-root { background-color: #ffffff; color: #336699; }'
});
sIFR.replace(copernicus, {
selector: 'h3',
css: '.sIFR-root { background-color: #ffffff; color: #cc6633; }'
});
sIFR.activate(copernicus);
sIFR.replace(copernicus, {
selector: 'h2',
css: '.sIFR-root { background-color: #ffffff; color: #336699; }'
});
sIFR.replace(copernicus, {
selector: 'h3',
css: '.sIFR-root { background-color: #ffffff; color: #cc6633; }'
});
Include sIFR Files in your HTML
Then, simply upload these files to your webserver (along with your newly create .swf), and reference them from within your HTML, before the ending <head> tag.
<link rel="stylesheet" href="sifr.css" type="text/css" />
<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-config.js" type="text/javascript"></script>
<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-config.js" type="text/javascript"></script>