Prototype sIFR Font Replacement (Version 2)

by Brian R. Miedlar.   Last updated on 11/22/2009.

Version 2 runs on the Prototype 1.6.1 library w/ SwfObject 2.1.

The Scalable Inman Flash Replacement (sIFR) library (here) is great for introducing new typefaces into web content.

I ported the code to work with prototype and swfobject, trimming the code and adding features along the way.

sIFR Font Replacement with Prototype 1.6.1 and SwfObject 2.1

Following is code showing how to replace a given css selector with flash font text.

var oIfr = new Ifr(); if(oIfr.isSupported) { oIfr.apply('#Container h1', { 'src': 'fonts/Font.FranklinGothic.swf', 'wmode': 'transparent' }); }

Color Replacement

One limitation I saw with the original sIFR was that colors were hard coded. I changed this to look into the CSS itself for color information. Browsers handle colors a little differently so I ported code over from Stoyan Stefanov's color library (here) as well.

Loading the Carousel library

My scripts requires the following standard javascript imports to be made.

  • prototype/prototype.js
  • model/swfobject.js
  • model/ifr.js (this is the prototype-based IFR library)
  • behavior/ifr.js (this is the prototype-based IFR library)

Example and Code

View a sample Prototype Inman Flash Replacement application here

Download the sample code here

You will still need to generate fonts in the way described by the original sIFR library (here).

Comments

Nickname:
Message:
Post Message