Loading ...
Implant sIFR3 – A Healthy Alternative to Browser Text
Last year I have written a tutorial about sIFR. I covered a basic installation guide for sIFR version 2.0 and as of today, it is really out-dated. sIFR version 3 is out for some time now and has some more interesting and better features.
Let’s learn how to install the new sIFR 3 to your website!
Basic Information about sIFR
sIFR is the “Healthy alternative to browser text”, regarding to the authors Mike Davidson and Mark Wubben. With sIFR it is possible to display fonts on the internet that doesn’t have to be installed on the computer of the user. sIFR creates more typography options for the web!
The technique is a combination between Flash, JavaScript, CSS and HTML. Due this fact you have to remember to use sIFR only on important titles and subtitles because otherwise it might drastically slow down your site.
How does sIFR work?
sIFR has a system that really works great. The browser of your visitor (sIFR is supported by almost all browsers that support Javascript and Flash!) loads a basic web page. Javascript checks if Flash is supported and if this is the case, Javascript adds tags around the elements that will use sIFR.
Flash will now automatically load Flash movies where the new tags are located and ActionScript fills your Flash movie with the text, typeface and size. This all happens in split seconds!
What if Javascript or Flash is not supported?
If this is the case, the browser will load the web page normally, those visitors doesn’t even know they are missing the fun. That’s why sIFR is perfect: It doesn’t delete the original h1, h2, h3 or any other tag, which makes this technique pretty, accessible and search engine friendly!
Installation to your website
The installation and customization of sIFR on your website isn’t something you do in 30 seconds. Take your time and read this guide chapter by chapter and you will fly through it!
Table of Contents
- Download The Files You Need
- Generate The yourtypeface.swf File
- Uploading Files
- Implant sIFR Into Website
- Configure sIFR
- Style sIFR Titles
- HTML Items Inside Your sIFR Title
- Examples
1. Download The Files You Need
After a search for the latest version, I have found the directory where all the nightly releases are located. You should download the latest version. The version I will use in this tutorial is sifr3-r419.zip.
When you downloaded these files you should see four folders. Three of them (flash, css and js) contain the files we need to install sIFR so make sure you have a click away.
2. Generate the yourtypeface.swf file
We will use the sIFR Generator to do the job. It is also possible to use a Flash editing program like Adobe’s Flash CS, but I thought this way it is easier. You simply choose a TrueType typeface and walk through a wizard and your sIFR file is ready to go.
Walk through the Wizard
- Open the Wizard page
- Upload your TrueType (.ttf) font file – if it doesn’t select from the C:/Windows/Fonts folder, try copying it to some other folder.
- Choose sIFR version 3.419 – Maybe there are newer versions when you read this, that should be alright too!
- Choose Glyph Set - The more options to choose the bigger the sIFR file; you should select what you prefer.
- Type the Anti Spam words.
- Preview and download your sIFR file!
That’s all. You have your yourtypeface.swf sIFR file ready for use. Move on to the next step! I would like to thank sIFR Generator for this awesome tool.
3. Uploading Files
After we generated our yourtypeface.swf file, we are ready to implant sIFR into the website, but first you should upload these three files:
- js/sifr-config.js
- js/sifr.js
- yourtypeface.swf
sIFR also needs some styles to operate (sIFR-screen.css and sIFR-print.css). You can find in the css folder and you have two options to go with this. You could choose to upload these files to your webserver with the other files, or you could add these styles to your current media and print stylesheets. That saves us a couple extra miliseconds when the page loads.
4. Implant sIFR Into Website
To load sIFR to your website, we have to call for some Javascript files with these codes:
1 2 3
<script src="/path/sifr.js" type="text/javascript"></script>
<script src="/path/sifr-config.js" type="text/javascript"></script>
Change path to the folder(s) where you have uploaded your files.
5. Configure sIFR
Next we will configure sIFR so it loads the correct yourtypeface.swf file. You should open up sifr-config.js located in the js folder.
sifr-config.js
This file will be used to configure the options we have with sIFR at the moment. I remember the time I had written the sIFR 2.0 tutorial and the options were everywhere! It has been much more organized.
Once you’ve opened sifr-config.js and you will notice there isn’t anything in there yet. We have to add the options ourselves. Let’s say we’ve generated a .swf file with the typeface yourtypeface you will use the following codes:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
var yourtypeface = {
src: '/path/yourtypeface.swf'
};
sIFR.activate(yourtypeface);
sIFR.replace(yourtypeface, {
selector: 'h2.sifr-title'
});
Explanation Javascript
As you can see, the selector (the title we will add sIFR too) is called for by this element <h2 class=”sifr-title”>. You can change that to your likings.
If you used the typeface Meta when generating your file, your .swf file is named meta.swf. You can use these codes instead:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
var meta = {
src: '/path/meta.swf'
};
sIFR.activate(meta);
sIFR.replace(meta, {
selector: 'h2.sifr-title'
});
You get the picture, right? After you saved this file and uploaded it to your web-server, you will see that sIFR 3.0 is working!
6. Style sIFR Titles
But, sIFR doesn’t stop with this basic stuff, there is loads more possible. For example, we could add some CSS that makes your titles look better.
Open sIFR-screen.css (in the css folder) and add visibility:hidden; to .sIFR-active h2.sifr-title. This will hide the standard HTML text when sIFR is loading. The .sIFR-active element makes sure the HTML text does show when sIFR isn’t working.
CSS
1 2 3 4 5
.sIFR-active h2.sifr-title{
visibility: hidden; line-height:1em;
}
Javascript
We can change the font-size, background color and more via the Javascript string we have seen in step 5. Not every CSS rule is supported, so check out what’s possible on the Styling wiki.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
var yourtypeface = {
src: '/path/yourtypeface.swf'
};
sIFR.activate(yourtypeface);
sIFR.replace(yourtypeface, {
selector: 'h2.sifr-title',
css: 'h2.sifr-title{ font-size:14px; background-color:#cccccc; }'
});
7. HTML Items Inside Your sIFR Title
sIFR has also the possibility to add em, strong or even links (or anything else) inside your title. These kind of features make sIFR really awesome in use.
Styling goes as following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
var yourtypeface = {
src: '/path/yourtypeface.swf'
};
sIFR.activate(yourtypeface);
sIFR.replace(yourtypeface, {
selector: 'h2.sifr-title',
,css: [
'h2.sifr-title{ font-size: 14px; background-color: #CCCCCC; }'
,'em { font-style:italic;; }'
,'strong { font-weight:bold; }'
,'a { text-decoration: none; }'
,'a:hover { text-decoration: underline; }'
]
});
8. Examples
Everyone would like to see some examples where sIFR is used to see how it works and looks.
You want more?
sIFR doesn’t stop with the information I gave you here, many more things are possible. Here are some resources that you might enjoy.
- Mike Davidson and Mark Wubben – Authors of sIFR! Keep up the good work guys!
- Official sIFR wiki – Includes extra information about Styling, Javascript Configuration and many more.
- sIFR Generator
- Wikipedia Page
- Forum dedicated to sIFR – Go there for your advanced questions!
Keep in mind that I am a human too, so if you have found any bug, typo or error, please let me know to make this tutorial as helpful as possible.
[...] Start using sIFR on your website!Author: Stefan Vervoort | Please Comment! THIS ARTICLE IS OUT-DATED : READ THE LATEST VERSION [...]
[...] Visit Source. [...]
Check out my logo. How do you like the design?
yours truly
the bingohousewife
What does it have to do with sIFR3?
Excellent introduction Tut. I have to admit. I once used a wordpress template that had sIFR for all it’s text. At that time I had no idea what sIFR was and so couldn’t figure out why my site was slow only when using that theme, but was fine while using other themes. As you rightfully pointed out, this is a bad practice to follow.
Hopefully with the help and widespread adoption of CSS3 custom font we can better control over fonts.
@Pavs – That’s a beginners fault anyone could make. Before we can use CSS3 we are at least 10 years further (if we look at IE6…). Thanks for your comment, appreciated.
Hi Stefan, thanks for the tutorial!
I think you should add that the line-height for the .sIFR-active styles should be set to 1em. Also, you don’t necessarily have to specify a sifr-title class, since most common CSS selectors will work. You may also want to show how to use more than one Flash file, by passing several arguments to the sIFR.activate() call.
Groet,
Hi Mark, Thanks for reading!
I will add those points to the article.
Groet,
Despite the fact their new site layout is screwed up, this method is a very simple way to implement sIFR fonts too:
http://jquery.thewikies.com/sifr/
Nice Post.
[...] sIFR3 to improve your website to with search-engine friendly and accessible, yet pretty titles. View source Vertical1235083 = false; ShowAdHereBanner1235083 = true; RepeatAll1235083 = false; [...]
[...] Implant sIFR3 – A Healthy Alternative to Browser Text [...]
Good walkthrough of sIFR. One thing that may be a cause of concern is that all the JS and flash files might slow down the site – particularly when the sites get search and social media traffic, which is typically impatient.
[...] for awesome typography on the internet. CSS typography is possible, or an alternative called sIFR3 that improved out situation. Today we will experiment with another typography alternative: [...]
I use WordPress for my blog, and it sounds like perhaps I should reconsider. I’ll need a few months, but eventually, I’ll understand all of the good information in this blog.
[...] I have written tutorials about the use of sIFR3 and FLIR. Check them out if you like. Today it is time to teach you something about a technique I [...]
Nice post bro, the information it’s very usefull for us.
[...] de preocuparte, como se hace y cuales son su ventajas en comparación a otras alternativas como sIFR3 y [...]
[...] have been talking about and introducing great CSS typography alternatives like sIFR3, FLIR or Typeface.js. They have given us more typography possibilities and [...]
I think write the code in rules will be healthier.
Hi
I have run through this tut step by step – but it seems to only display my h2 and a white block.
when i use firebug to check why – it seems to be inheriting a bgcolor of #FFFFFF somewhere.
anyone got any idea as to how i can fix this … i have tried setting the background-color and color in the sifr-config.js to green and red – just to test – but still no luck.
Can anyone shed some light perhaps?
[...] have been talking about and introducing great CSS typography alternatives like sIFR3, FLIR or Typeface.js. They have given us more typography possibilities and [...]
thanks for that tutorial
As a designer, I get very frustrated at being ‘shackled’ in how I present the written word on a web site.
Assuming I can get the thing installed OK (not very techy
) – this should sort me out nicely.
ScottF
[...] the the first thing in my mind and i found a great tutorial from Stefan Vervoort of divitodesign on how to implant sIFR3. For those who are new to sIFR, here’s a quote from divitodesign sIFR is the “Healthy [...]
[...] * Article interessant: http://www.divitodesign.com/2008/09/implant-sifr3-healthy-alternative-browser-tex/ [...]
Hi,
Thanks for the tutorial ! It’s really easy to understand and useful.
However, is there limitation to the font we can use? Such as if the font is copyrighted.
Will it cause the font to display incorrectly(the font is faded like the some tornado passed by) as what I’m currently facing now.
I have this font called Postiv-A and it has restriction for embedding. So i thought maybe that’s why I’m getting a incorrect display?
Anyone has any idea to this?
Thanks.
@Joyce — that’s a problem. You can’t use fonts that has restriction for embedding, because that’s restricted. You can take a look at free fonts, or ask the owner of the font for their cooperation.
I see. Thanks for the reply.
I’ve got another problem. Let’s say I’ve got this index.html in the root folder everything linked to the respective location. It won’t show the flash text and my original text either.
When I moved the index.html into this folder say “demo” and changed the respective linking to the js and css. It works and showed the flash text.
Somehow, it won’t work with the html file inside the root folder and I don’t understand why.
Can anyone let me know the solution to this?
Thanks!
Wow…the end result is truly excellent. Is there a way we can encourage surfers and instruct them to enable java and have fun of sIFR and what they would be missing?
[...] whole layout flow together. To have more typography options for their news titles, they have used sIFR3, which make the whole thing look perfectly [...]
i keep getting an error on the page. It says my typeface.swf is undefined in the sifr-config file. Any ideas?
Make sure you use the right paths to the right files. If that’s not the problem I am not sure what is.
Thanks for one’s marvelous posting! I quite enjoyed reading it, you will be a great author.I will always bookmark your blog and may come back in the foreseeable future. I want to encourage you to definitely continue your great job, have a nice weekend!