SIFR implementation – Insert rich typography to your sites without touching the HTML

Hi All,

As we all know font-family: of CSS doesn’t support whatever you write. Which means, there are some standard fonts present in all the systems of the world. Which we use to specify as font-family in CSS. Otherwise it will take the default font available in the browser.

What if I need all headings of my site with some custom font like ‘Trade Gothica’. Specifying this value in CSS’s font-family will work well only if the machine used by end-user has this font.

We have a alternate method for this we can achieve this by using flash and sifr.

1. Convert your font to a flash file ( .swf ) file. No need to worry if you dont know how to do it. There is a site available for this Sifr Generator which will convert your font to a swf file.
2. You need 3 javascript files jquery-min.js,  jquery.flash.min.js and jquery.sifr.min.js
3. Rename your swf file to sifr.swf and place it in flash directory
4. You need to write a jquery script which scans all your class names which should be converted to custom font. Here in my example i am converting all my h1 and h4 tags of the page to custom font.

$(document).ready(function() {
    $('h1, h4').sifr({
        path: "flash/",
        font: "sifr",
        textAlign: "left"
    });
});

That’s it, you can see the flash doing cute job in your page.
Demo is here and you can download that example by clicking here.

Advertisement