Use Any Font On Your Site With sIFR

Most blogs/websites whenever they want to have some fancy text for headlines/nav usually resort to using an image. This becomes a burden whenever you want to change things, and isn’t as good for SEO as plain old text. Enter sIFR, a javascript method for using *any* font on a webpage with little to no work. And it degrades well! Follow along on a full example.

I’m sure many of you are familiar already with sIFR, but this is for those of you that have not heard of it, or were skeptical about how hard it would be to implement.

Let’s look at what you can do with it. An example page is set up here that shows fonts being used. Theres no images on the page. Turn off JS and see that it still works fine.

First, head down and grab the latest release. Unzip it and make sure the demo html works ok. 2.0.5 is most current, fixing a problem with the latest version of flash.

We need to generate sIFR SWFs which are flash versions of a TTF font. So, choose which fonts you want, open sifr.fla in flash, double click on the big invisible box, select your font, and export it. That’s it.

What, you don’t have a copy of flash? That seems to be what gets most people. Luckily, theres an alternative to using flash. Check out sIFR Maker that converts TTF to sIFR SWF on a windows command line without needing flash.

Now, import the CSS and JS files into the header of your blog/webpage.

Next, in the header, add a JS code block and insert the following lines

sIFR.setup();
sIFR.replaceElement(named({sSelector:"{CSS SELECTOR TO SIFR}",
sFlashSrc:"{PATH TO sIFR SWF}", sColor:"#333333", sLinkColor:"#333333",
sBgColor:"#ffffff", sWmode:"transparent", sHoverColor:"#333333", nPaddingTop:2,
nPaddingBottom:2, sFlashVars:"textalign=left&offsetTop=0"}));

You can add as many of the second line as you want to cover all your CSS selectors or different fonts you may wish to use. Also feel free to edit any of the above parameters to suit your design (color, etc).  Most of them are optional :)

You can read a more in depth tutorial on setting it up here.

sIFR fonts can help your site be SEO friendly, easy to maintain (no more making new graphics when you need a new nav icon), all while keeping whatever typography you choose.

Remember to use it sparingly (only on headlines, etc), and to choose an HTML font that complements your new headers.

, , , , ,

27 Responses to Use Any Font On Your Site With sIFR

  1. Mark Wubben February 1, 2008 at 8:13 pm #

    This is weird, just disabled CSS in Firefox (View -> Page Style -> No Style) and the sIFR text didn’t show up! No idea why, since the elements got replaced, but I’m not complaining.

  2. Mark Wubben February 1, 2008 at 8:13 pm #

    This is weird, just disabled CSS in Firefox (View -> Page Style -> No Style) and the sIFR text didn’t show up! No idea why, since the elements got replaced, but I’m not complaining.

  3. Remon Lammers February 4, 2008 at 9:15 am #

    Hi Mark,

    Nice to talk to you. Fun fact: I studied at University of Twente also. :-)

    Reflow is normal behaviour in TTF, but I would recommend using `nowrap` for `white-space` because otherwise more images are needed.

    You are right that there is no support for interaction with the text after it has been replaced. Also I haven’t implemented some sort of rollback…yet. :-)

    I looked up the accessibility option but it is currently only available in the pro version. I will move it to the free version in the next release. Basically it then puts a transparent element in front of the image so you can still select and copy text.

    Also I’m looking into existing image replacement techniques and see if I can further improve accessibility.

    Haven’t been following the latest developments with sIFR to be honest, so I’ll catch up with your improvements as well.

    The lazy scaling of sIFR did inspire me to put in some lazy features myself like lazy loading and even lazy replacing. :-)

    PS. In Opera 9 images are replaced when CSS is off, but they do not seem out of place here. Maybe put in some detection to prevent replacement at all.

  4. Remon Lammers February 4, 2008 at 9:15 am #

    Hi Mark,

    Nice to talk to you. Fun fact: I studied at University of Twente also. :-)

    Reflow is normal behaviour in TTF, but I would recommend using `nowrap` for `white-space` because otherwise more images are needed.

    You are right that there is no support for interaction with the text after it has been replaced. Also I haven’t implemented some sort of rollback…yet. :-)

    I looked up the accessibility option but it is currently only available in the pro version. I will move it to the free version in the next release. Basically it then puts a transparent element in front of the image so you can still select and copy text.

    Also I’m looking into existing image replacement techniques and see if I can further improve accessibility.

    Haven’t been following the latest developments with sIFR to be honest, so I’ll catch up with your improvements as well.

    The lazy scaling of sIFR did inspire me to put in some lazy features myself like lazy loading and even lazy replacing. :-)

    PS. In Opera 9 images are replaced when CSS is off, but they do not seem out of place here. Maybe put in some detection to prevent replacement at all.

  5. Mark Wubben February 4, 2008 at 1:27 pm #

    How do you do reflow (columns get smaller)? I don’t see a resize handler in the source code. I take it you mean you can select either all text, or none? You shouldn’t need other elements to do that, you can just select the image and it’ll copy the alt text, no?

    I saw your lazy loading implementation, it could use some improvement though ;-)

  6. Mark Wubben February 4, 2008 at 1:27 pm #

    How do you do reflow (columns get smaller)? I don’t see a resize handler in the source code. I take it you mean you can select either all text, or none? You shouldn’t need other elements to do that, you can just select the image and it’ll copy the alt text, no?

    I saw your lazy loading implementation, it could use some improvement though ;-)

  7. Buy Kamagra August 27, 2010 at 10:12 pm #

    Pretty good post. I just stumbled upon your blog and wanted to mention that I have very enjoyed reading your blog posts. Any manner I am going to be subscribing to your feed and I hope you post once more soon.