This simple technique has seen more and more usage among web developers

Aug 26, 2009 15:03 GMT  ·  By

Mark Wubben and Mark Davidson, two JavaScript and Flash developers, came up with a unique technique back in 2004 of incorporating non-standard web fonts in modern-day Web 2.0 websites. Relying on a simple variable input inside a SWF file that contains an embedded font, developers can rapidly embed Flash objects instead of old, stylish images containing the desired non-web font.

sIFR (Scalable Inman Flash Replacement) has cut its way through the different Internet techniques of rendering non-standard web fonts and gathered quite a big following lately, especially in the WordPress and jQuery community.

Due to its simple implementation, the method has managed to gain more followers than other similar techniques like the classic “header replaced by image” and a pure JavaScript solution, TypeSelect.

The script simply parses the HTML page for predefined tags and records the text between those tags. It then removes and replaces the tag with a Flash SWF embedded object that was configured to listen for input variables. The previously replaced text is then fed inside the Flash object, configured in advance with an embedded, non-standard web font. The inputted code is then rendered inside the Flash object as Flash text with the desired (and previously embedded) font.

To simply describe all the steps developers need to go through, they first have to download the script, edit the .FLA file and embed the desired font inside the Flash object. Then, they need to export the .FLA file to a SWF format. Afterwards, all the attached scripts (CSS and JavaScript files) have to be uploaded to the server and included in the web page that requires the font replacement.

The developers then have to configure the sIFR JavaScript native configuration files with the tags that will be replaced by Flash objects, and, at the end, if everything is working, all CSS and styling tweaks can be done from the CSS and JavaScript files (examples and instructions included).

Variants of the script can be downloaded from our Softpedia Webscripts download page. Tutorials can be found on the developers’ home pages or through a simple Google search. Mike Davidson's home page can be found here. Mark Wubben's home page can be found here.

Photo Gallery (2 Images)

sIFR sees increased usage
sIFR example
Open gallery