Implant sIFR3 – A Healthy Alternative to Browser Text

September 29, 2008 31 Comments →

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!

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="/img/spacer.gif"> "/path/sifr.js" type="text/javascript"></script>
 <script src="/img/spacer.gif"> "/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:

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:

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

.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.

var yourtypeface = {
src: '/path/yourtypeface.swf'
};

sIFR.activate(yourtypeface);

sIFR.replace(yourtypeface, {
selector: 'h2.sifr-title',
css: 'h2.sifr-title{ px; 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:

var yourtypeface = {
src: '/path/yourtypeface.swf'
};

sIFR.activate(yourtypeface);

sIFR.replace(yourtypeface, {
selector: 'h2.sifr-title',
,css: [
'h2.sifr-title{ px; 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.

Default Demo Example
Blitz Magazine Online
Jindou
Streetlamp
Deaf Can Do
Need more Examples?

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.

Information about the Author:

Name: Stefan Vervoort

URL: twitter.com/divitodesign

Description enjoy design, write articles, like typography, love football, keep chilling.

31 Comments

Start using sIFR on your website! » DivitoDesign says:

September 29, 2008 at 7:57 pm

[...] Start using sIFR on your website!Author: Stefan Vervoort | Please Comment! THIS ARTICLE IS OUT-DATED : READ THE LATEST VERSION [...]

Reply
Implent sIFR3 - A Healthy Alternative to Browser Text says:

September 29, 2008 at 11:05 pm

[...] Visit Source. [...]

Reply
Bingohousewife says:

September 29, 2008 at 11:47 pm

Check out my logo. How do you like the design?

yours truly

the bingohousewife

What does it have to do with sIFR3?

Reply
pavs says:

September 30, 2008 at 3:22 pm

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.

Reply
Stefan Vervoort says:

September 30, 2008 at 3:26 pm

@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.

Reply
Mark Wubben says:

September 30, 2008 at 4:56 pm

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,

Reply
Stefan Vervoort says:

September 30, 2008 at 5:00 pm

Hi Mark, Thanks for reading!

I will add those points to the article.

Groet,

Reply
Dan Masq says:

October 1, 2008 at 6:01 am

Despite the fact their new site layout is screwed up, this method is a very simple way to implement sIFR fonts too:

jquery.thewikies.com/sifr/

Nice Post.

Reply
Implent sIFR3 - A Healthy Alternative to Browser Text | CrazyLeaf Design Blog says:

October 1, 2008 at 5:00 pm

[...] sIFR3 to improve your website to with search-engine friendly and accessible, yet pretty titles. View source Vertical1235083 = false; ShowAdHereBanner1235083 = true; RepeatAll1235083 = false; [...]

Reply
Top 50 Sources of Inspiration: Month of September | Peakflow Design says:

October 1, 2008 at 7:38 pm

[...] Implant sIFR3 – A Healthy Alternative to Browser Text [...]

Reply
Sumesh says:

October 12, 2008 at 8:25 am

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.

Reply
Install FLIR - Typography Solution For The Web » DivitoDesign says:

October 12, 2008 at 3:50 pm

[...] 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: [...]

Reply
Ed Harris says:

October 15, 2008 at 3:10 am

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.

Reply
Render Text With Javascript: Typeface.js » DivitoDesign says:

November 2, 2008 at 7:38 pm

[...] 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 [...]

Reply
beegoes says:

November 2, 2008 at 9:36 pm

Nice post bro, the information it’s very usefull for us.

Reply
Utiliza cualquier tipografía en web con Javascript | frogx.three says:

November 3, 2008 at 3:00 am

[...] de preocuparte, como se hace y cuales son su ventajas en comparación a otras alternativas como sIFR3 y [...]

Reply
Find Free Quality Fonts (+ 10 Fonts Included) » DivitoDesign says:

November 16, 2008 at 2:51 pm

[...] have been talking about and introducing great CSS typography alternatives like sIFR3, FLIR or Typeface.js. They have given us more typography possibilities and [...]

Reply

Related searches:
website should september browser version

gipoco.com is neither affiliated with the authors of this page or responsible
for its contents. This is a safe-cache copy of the original web site.

gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.

DivitoDesign

Categories

Popular Articles