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.



  1. Sifr Generator files will be blocked by firefox and IE. Not sure if it is an exploit but I was surprised that it wanted to start ieframe.dll.

    Better to stick to creating the swf-font-file yourself just to be safe.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s