“95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.”

A good web designer knows the importance of typography in creating web sites. As this post mentions, typography is in fact the most important part of designing stylish web pages. However, it is in fact a little problematic to get all the fonts work in internet browser, the sIFR is the solution.

What is sIFR ?
sIFR, Scalable Inman Flash Replacement, simply detects texts and replaces them with a flash movie, which can illustrate the any font you embed in. Speaking of how it works, it is a simple javascript file doing the replacement, it has also the flash movie, which you can edit in Adobe Flash so that you can add the font you want to use in your web page.

sIFR is slow
Every good thing at internet, has disadvantages. Despite the fact sIFR produces beautiful typography, size of the required file is not that small. The required javascript file is about 22kB (uncompressed), required css file is about 3kB and the flash movie is usually between 10kB and 20kB, depending on the font used and embedded characters.

Faster & Smaller Version: sIFR Lite
In order to reduce the size, someone rewrote the sifr’s javascript file, to form a lite version and to provide a faster way of replacing texts. He named it sIFR Lite. The sIFR Lite’s javascript is just 3.7K (uncompressed), reduced from 22kB, so it actually saves bandwidth for you and time for your visitors. From developer’s site:

sIFR Lite comparing to original sIFR
1. It is smaller. This library is 3.7k uncompressed. The original sIFR is 22k, no joke!
2. It auto-detects the text color of the elements. (The original sIFR makes you enter it manually!)
3. It is completely object-oriented. (No more static methods floating all over the place.)
4. It no longer uses CSS selectors. Elements are targeted by tag name and class. (A slight loss in ease of use, but faster, lighter, and more maintainable.)
5. It isn’t named after myself, or anyone else. haha.

I highly recommend you to use the sIFR Lite instead of the original sIFR. Despite the fact sIFR lite has no support for CSS selectors (resulting some bugs for heading tags in internet explorer; but there is a workaround), it is way small and fast comparing to the original sIFR. Meaning, you can enjoy the typography beauty on your site faster because of the reduced size of the sIFR javascript.

sIFR Lite Usage
I will explain it step by step.

First download all the zip file from the original sIFR creator’s website .
Contents of zip file:

• css/sIFR-print.css
• css/sIFR-screen.css
• js/sifr.js
• js/sifr-config.js
• flash/sifr.fla

Now, open sifr.fla and edit the font of the text (choose a font to use) and publish the flash movie.

Download the sIFR lite here ( the problem mentioned in the comments below, is fixed, thanks to Patrick ) and replace it with js/sifr.js. Also remove the js/sifr-config.js. Don’t forget to edit the font path in sifr.lite.js.

Defining the text replacements are so simple, following javascript replaces h1.mySpecialClass, h2.mySpecialClass and h3.mySpecialClass texts with the flash movie, tradegothic.swf.

var gothic = new Font('tradegothic.swf', {
 
tags:'h1,h2,h3',
 
classFilter:'mySpecialClass'
 
});
 
gothic.replace()

Put the above code inside your body tags. Also reference the js/sifr.js and all css files inside your head tags. That’s it. You should now have had the sifr working correctly in your web page.

You can also use it without targeting any class. If you’d like to target all heading tags and want all of them replaced, you can use the following javascript.

var gothic = new Font('tradegothic.swf', {
 
tags:'h1,h2,h3'
 
});
 
gothic.replace()

sIFR Lite Demo

For some IE bugs and differences, you may not see the IE reflection of your javascript code rendered in Mozilla, so you better see the test results using the internet explorer. I’ve googled if there is any kind of program doing that and the firebug was the answer again. According to Google’s results, there is the firebug lite, which you can include inside your website’s head tags and have the same firebug extension in Mozilla, in Internet Explorer.

Firebug Lite Usage

Just add the following code inside your page’s head tags and launch it using Internet Explorer. Firebug console must be visible at the bottom of the page.

<script src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js" type="text/javascript"></script>

Visit this page and download “corner.zip”. In the zip file, there are few javascript files that you can have some other effects with, but if you just want rounded corners, copy justcorners.js and reference it inside your head tags.

...
<script src="http://www.wowebmaster.com/demo/justcorners.js" type="text/javascript"><!--mce:0--></script>

Then, add a class into your image tag as it’s done in the following code.

<img class="corners iradius12" src="http://www.wowebmaster.com/demo/corner.jpg" alt="" width="561" height="353" />

Corner radius is set by the second class, which is “iradius12″ above. If you want greater radius, use highger values after “iradius”. e.g. iradius15, iradius25, iradius30…

See more examples at: http://www.netzgesta.de/corner/

If you are using iframes to serve frequently updated feeds on your site, such as a score board, news feed, then you should provide your visitors an iframe updating automaticaly while the page stays same. This is accomplished by a javascript function. You can easily set a time interval to refresh a specific iframe on your page by this way. As a result, your users don’t have to refresh the whole page every time to update the feed flow.

Put the following function inside head tags on your page.

<script><!--mce:0--></script>

Also put an onload attribute for the body tag, similar to the following:

Finally, don’t forget to name your iframe as it is called in javascript function (”iframename” in this example).

An example using this function is a football live scores page.

Here how it is done:

1. Configuring your htaccess

If you do not have a .htaccess file on your website’s directory, create it. But don’t forget that it is a hidden file, if you are using SSH Secure Shell’s browser, you have to select “View” >> ” Show Hidden Files ” to see whether you have created one, before.

Now, add the following code to your .htaccess file.

AuthName "Restricted Area"
AuthType Basic
AuthUserFile /<fullpath>/yourwebsite.com/private-folder/.htpasswd
require valid-user

After AuthName field, write a message that will be seen on the authentication screen and don’t forget to add your fullpath after the AuthUserFile field. It is usually something like this: AuthUserFile /home/.servername/www/yourdomain.com/ .htpasswd

2. Configuring your .htpasswd

.htpasswd is a hidden file that has the encrypted password combinations of your users for authentication. It must be put in a non-public folder, to prevent visitors from viewing this file via a browser. You can put it such as directly above your public HTML folder. Now you understand what it stands for. This htpasswd can be directly created via command line of Linux servers. On the prompt screen of your linux server, type the following command and be sure to run this command above your html folder:

htpasswd -cmd .htpasswd <username>

You’ll be prompted to write your desired password. After that, go to yourwebsite.com/private-folder/ to see if everything is ok. You’ll be asked to login with your username and password.

3. Adding More Users

Adding more users is easy. Just type the following command on the command screen of your server:

htpasswd .htaccess

Type the desired password and that’s all.