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.

Advertisements

2 comments

  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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s