Main Navigation

Main Content

sIFR 3 Flash Text

sifr

This is the first post of hopefully many that describes the technology I have used on this website. It will provide a great reference for me to come back to and also introduce to others some great tools and resources.

sIFR 3

When I first heard about sIFR I had to double take because it almost seemed too good to be true. One of htmls many limitations was the inability to use a bespoke font that differed from those supported by the operating systems and therefore run the risk of it not displaying properly on a users screen. To quote sIFR’s website:

“sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of JavaScript, CSS, and Flash, which renders the font. It degrades gracefully if Flash is not present. sIFR 3 is open source and licensed under the CC-GNU LGPL.”

It basically allows you to use which ever font you desire, even if it doesn’t exist on the users operating system. You can choose which elements you wish to apply the transformation to e.g. h1, h2, p.aClassName and even style them exactly how you want. For Quirksmode I have applied sIFR to the h1′s using a font called Corbel, you can test the difference by disabling javascript or the stylesheet.

A few things to watch out for

  1. sIFR does not work when opened straight from the local filesystem. You must load sIFR from a web server.
  2. You can’t change the size of the browser text on the fly, you must click refresh for the changes to take effect
  3. Javascript must be enabled for your Flash Text to display
  4. Flash must be enabled/installed for your Flash Text to display

Alternative to sIFR

If you want to show off your fancy new fonts and don’t want to run the risk of a user not having flash or javascript enabled, then the other solution I have come across would be to use an image and hide the html text by positioning it off screen. The following css will do just that:

h1.logo{
background:url(http://www.quirksmode.co.uk/wp-content/uploads/2008/03/mainlogo.jpg) no-repeat;
width:284px;
height:65px;
text-indent:-9999px;
outline:none;
}

comments powered by Disqus

Sub Footer