#39: How to Use sIFR 3

sIFR (Scalable Inman Flash Replacement) is a technology that allows you to use any font you wish on your web pages. Long story short, it uses JavaScript to target certain text page elements and replace them with a block of Flash, which is the same text only rendered with a new font. This means you are free to use any font you wish in your designs instead of being limited to very small set of "safe" web fonts. sIFR degrades nicely for users without Flash and/or JavaScript, so no worries about that. This tutorial walks through the process of how to get it working on a webpage, from downloading it to creating your own custom font to getting it working live.

Links from video:


  1. Deron Sizemore
    Permalink to comment#

    Thanks for this video. I was finally able to get sIFR to work after following this video exactly as you've demonstrated it here. The problem for me initially was that I was attempting to use sIFR2 with no luck and then I tried the most recent build of sIFR3 r436 and also had no luck. After using the exact same build that you used, everything started working as expected. So, I have no idea what the problem was but I'm glad it's working now. Thanks for the video, helped greatly. I was really confused by the official docs, so the video was a breath of fresh air.

  2. spiry
    Permalink to comment#

    man.. i appreciate the work you put into this tutorial, but IMO you talking waaaay too much… legality of fonts etc. who cares really? would be great if you could provide quick version of the same tut as many (unlucky like me ;) people have slow conections and are not interested in anything else than getting sifr to work asap. otherwise great :) thx

  3. Andrew K
    Permalink to comment#

    Awesome! Thanks… Love the screencasts Chris.

  4. Derek
    Permalink to comment#

    Thanks a bunch, Chris. I was about to give up on sIFR ’cause I couldn’t get it to work, but your screencast made it super clear and it works!

  5. Sean
    Permalink to comment#

    Thank you. I’ve struggled with this for the past week and finally got it working after this tutorial. It actually sort of works on my xampp server (text is replaced, but doesn’t show) – but it up on a live server and everything works.

    Once again thanks – Like Deron, I had to use sifr-r419 rather than the lastest version.

  6. Bert
    Permalink to comment#

    Great Video. For those of us without Flash, have a look at 1.

  7. Linda Webster
    Permalink to comment#

    Thanks for the awesome tutorial! One question… how do I get it to work with WordPress 2.7 themes? None of the plugins work for me and I’ve been looking everywhere!

  8. Sean
    Permalink to comment#

    I used this tutorial with a wordpress theme. Just follow the tutorial and find the relevent code in your wordpress theme files. – also upload all the files required to the theme folder.

  9. vincent
    Permalink to comment#

    Thank you so much for this tut Chris. Like many of the folks above, I have been struggling with the available online tuts. You screencast has brought sifr to light.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.