#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. User Avatar
    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. User Avatar
    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. User Avatar
    Andrew K
    Permalink to comment#

    Awesome! Thanks… Love the screencasts Chris.

  4. User Avatar
    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. User Avatar
    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. User Avatar
    Permalink to comment#

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

  7. User Avatar
    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. User Avatar
    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. User Avatar
    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!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.