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. Kline January 27, 2008 at 2:33 am #

    @Everton:
    new plugin?
    I was worried the title was messed up, showed to me as
    “Use Any Font On Your Site With sIFR Edit ”
    Thought edit was part of the title ;)

  2. Avatar of Kline
    Kline January 27, 2008 at 2:33 am #

    @Everton:
    new plugin?
    I was worried the title was messed up, showed to me as
    “Use Any Font On Your Site With sIFR Edit ”
    Thought edit was part of the title ;)

  3. Kline January 27, 2008 at 8:19 am #

    aww.. no comments.. it must mean that sIFR is a common thing among webpages, no?

    It’s not commonly used, but I can guarantee that most blogs on the internet use image versions of big fonts instead of using sIFR as is commonly accepted…

  4. Avatar of Kline
    Kline January 27, 2008 at 8:19 am #

    aww.. no comments.. it must mean that sIFR is a common thing among webpages, no?

    It’s not commonly used, but I can guarantee that most blogs on the internet use image versions of big fonts instead of using sIFR as is commonly accepted…

  5. Mark from Bloglyne January 28, 2008 at 12:47 am #

    Another thing to learn about *grins* Does this slow the load down on already heavily database leveraged sites, like Directories? I think I would like to implement this, but it would be so great if there was a dashboard, or control panel interface… or, is there?

  6. Mark from Bloglyne January 28, 2008 at 12:47 am #

    Another thing to learn about *grins* Does this slow the load down on already heavily database leveraged sites, like Directories? I think I would like to implement this, but it would be so great if there was a dashboard, or control panel interface… or, is there?

  7. Kline January 28, 2008 at 6:31 am #

    Hi Mark,
    It can slow down client rendering time, but not server load time, except that clients need to get and cache a small JS file and a ~10k flash file.

    A dashboard/control panel for what exactly?

  8. Avatar of Kline
    Kline January 28, 2008 at 6:31 am #

    Hi Mark,
    It can slow down client rendering time, but not server load time, except that clients need to get and cache a small JS file and a ~10k flash file.

    A dashboard/control panel for what exactly?

  9. Remon Lammers January 31, 2008 at 3:15 pm #

    There is also an alternative to sIFR called True Font Family in order to use TrueType fonts on any website that runs on PHP.

    It does not need any preparation or conversion of ttf files and it is completely driven by CSS. This means you specifiy everything in your stylesheet using 100% valid CSS. It even supports web fonts with the @font-face rule and works in all major browsers.

    It also uses dynamic text replacement to replace text with images created by PHP and the GD library which comes standard in PHP 4.3+.

    There is a free version for non-commercial use.

    Might be an interesting alternative to some people.

  10. Remon Lammers January 31, 2008 at 3:15 pm #

    There is also an alternative to sIFR called True Font Family in order to use TrueType fonts on any website that runs on PHP.

    It does not need any preparation or conversion of ttf files and it is completely driven by CSS. This means you specifiy everything in your stylesheet using 100% valid CSS. It even supports web fonts with the @font-face rule and works in all major browsers.

    It also uses dynamic text replacement to replace text with images created by PHP and the GD library which comes standard in PHP 4.3+.

    There is a free version for non-commercial use.

    Might be an interesting alternative to some people.

  11. Kline January 31, 2008 at 6:15 pm #

    Remon,

    Yes, however, sifr is a bit better of a solution.

    Also, you should mention that TrueFontFamily is your own product.

    Image replacement has many issues that point to flash being a better, more elegant solution.
    Instead of letting the clients do the conversion work, you are making your poor server render an image file. This is probably not really an issue, as I would hope you would cache all generated images.

    Not all sites run php.

    The real problem is that in sifr, you can still highlight/copy text, and it is fully accessible. It still behaves like text.

    Also, you do a replace instead of an insert/hide existing, so acessibility is no good.

    If you have 100 replacements (just as an example), your method would require 100 HTTP gets, whereas sifr requires 1.

    True, you do not need to convert any ttfs, but as i mentioned that is a one liner using the software posted above, so i do not see that as any real sort of advantage.

    But, as an advantage, it will work for users that do not have flash.

    I think your product also has potential if you take the serverside php reliance a bit further and have in-php replace processing, so you can remove even the JS dependency. i.e. a method

    ttff.init(‘font name’);

    blah blah spitting out html generated’ . ttff.replace(‘text to replace’);

    I would welcome your reply as it is interesting to have a dialog about the best way to go about this.

  12. Avatar of Kline
    Kline January 31, 2008 at 6:15 pm #

    Remon,

    Yes, however, sifr is a bit better of a solution.

    Also, you should mention that TrueFontFamily is your own product.

    Image replacement has many issues that point to flash being a better, more elegant solution.
    Instead of letting the clients do the conversion work, you are making your poor server render an image file. This is probably not really an issue, as I would hope you would cache all generated images.

    Not all sites run php.

    The real problem is that in sifr, you can still highlight/copy text, and it is fully accessible. It still behaves like text.

    Also, you do a replace instead of an insert/hide existing, so acessibility is no good.

    If you have 100 replacements (just as an example), your method would require 100 HTTP gets, whereas sifr requires 1.

    True, you do not need to convert any ttfs, but as i mentioned that is a one liner using the software posted above, so i do not see that as any real sort of advantage.

    But, as an advantage, it will work for users that do not have flash.

    I think your product also has potential if you take the serverside php reliance a bit further and have in-php replace processing, so you can remove even the JS dependency. i.e. a method

    ttff.init(‘font name’);

    blah blah spitting out html generated’ . ttff.replace(‘text to replace’);

    I would welcome your reply as it is interesting to have a dialog about the best way to go about this.

  13. Remon Lammers February 1, 2008 at 7:41 am #

    Kline,

    First of all, I’m not trying to hide the fact that I wrote the script otherwise I could have used a different name.

    Secondly, let me say that I am not trying to undermine the sIFR technique which is great! I’m just pointing out another free alternative.

    There is already another free PHP based solution that eliminates the need of JavaScript completely by doing server side transitions. It is called P+C DTR.

    As for you concerns, let me address them below.

    Server side the images are generated once and then cached so the extra load on the server is minimal. The upcoming version can use cached images directly so no more PHP is used if images exist.

    Client side rendering of Flash files is probably harder than rendering images.

    The advantage of sIFR is that you only need to get the Flash font file once. Depending on the font and the Flash file size this will eventually be less traffic than getting images. But with broadband nowadays this will become less of a concern I think.

    Accessibility is different. You can set an option in TFF to make text more accessible as well. With JavaScript on and CSS off, TFF does no replacements even with the option on and sIFR probably will display double texts. With JavaScript disabled, text is still the same as with sIFR making it accessible to Search Engines.

    The big advantage of sIFR is that it works offline and without PHP as well. But if you have a PHP server TFF is a healthy alternative that is more easy to use and supports more CSS related properties in a more naturaly way though CSS StyleSheets.

    Both techniques has their advantages and disadvantages. sIFR has proven to be a solid technique, but I think mine can be as well. That’s why I developed it and would like people to know about it.

    This turned out to be a lot longer than expected, but readers can get a good overview this way.

  14. Remon Lammers February 1, 2008 at 7:41 am #

    Kline,

    First of all, I’m not trying to hide the fact that I wrote the script otherwise I could have used a different name.

    Secondly, let me say that I am not trying to undermine the sIFR technique which is great! I’m just pointing out another free alternative.

    There is already another free PHP based solution that eliminates the need of JavaScript completely by doing server side transitions. It is called P+C DTR.

    As for you concerns, let me address them below.

    Server side the images are generated once and then cached so the extra load on the server is minimal. The upcoming version can use cached images directly so no more PHP is used if images exist.

    Client side rendering of Flash files is probably harder than rendering images.

    The advantage of sIFR is that you only need to get the Flash font file once. Depending on the font and the Flash file size this will eventually be less traffic than getting images. But with broadband nowadays this will become less of a concern I think.

    Accessibility is different. You can set an option in TFF to make text more accessible as well. With JavaScript on and CSS off, TFF does no replacements even with the option on and sIFR probably will display double texts. With JavaScript disabled, text is still the same as with sIFR making it accessible to Search Engines.

    The big advantage of sIFR is that it works offline and without PHP as well. But if you have a PHP server TFF is a healthy alternative that is more easy to use and supports more CSS related properties in a more naturaly way though CSS StyleSheets.

    Both techniques has their advantages and disadvantages. sIFR has proven to be a solid technique, but I think mine can be as well. That’s why I developed it and would like people to know about it.

    This turned out to be a lot longer than expected, but readers can get a good overview this way.

  15. Kline February 1, 2008 at 10:27 am #

    Hi, I was not aware of P+C DTR.
    It is good to hear that you are making the cached version hit using .htaccess rules rather than php processing :).
    Client side rendering of flash files is harder on the client.. you are correct. But the extra time needed to fetch files.. I would assume that would make it about even.. just less CPU % but same wait for page to load.

    As far as accessibility goes, I guess I didnt read into TFF enough to see the option to make it more accessible.

    I’m not too concerned about sIFR and offline.. i wouldnt count that as a strong advantage to sifr as it is a rare case.

    I really appreciate you taking the time to answer. I think an open discussion really helps, and you are winning me over to your side. I can see a lot of merit in TFF and will at least give it a go in a future project (or try P+C DTR).

    I think an important point is that not all devices of the future have flash (cough.. iphone.. cough), and the image method would still work, unless iphones JS support is crap (i know older versions of IE for windows mobile suppored almost 0 dom calls.. i dont think it even supported getElementById(), lol).

    HAve you considered looking at porting it to other languages? It should be easy enough to port to most other languages??

  16. Avatar of Kline
    Kline February 1, 2008 at 10:27 am #

    Hi, I was not aware of P+C DTR.
    It is good to hear that you are making the cached version hit using .htaccess rules rather than php processing :).
    Client side rendering of flash files is harder on the client.. you are correct. But the extra time needed to fetch files.. I would assume that would make it about even.. just less CPU % but same wait for page to load.

    As far as accessibility goes, I guess I didnt read into TFF enough to see the option to make it more accessible.

    I’m not too concerned about sIFR and offline.. i wouldnt count that as a strong advantage to sifr as it is a rare case.

    I really appreciate you taking the time to answer. I think an open discussion really helps, and you are winning me over to your side. I can see a lot of merit in TFF and will at least give it a go in a future project (or try P+C DTR).

    I think an important point is that not all devices of the future have flash (cough.. iphone.. cough), and the image method would still work, unless iphones JS support is crap (i know older versions of IE for windows mobile suppored almost 0 dom calls.. i dont think it even supported getElementById(), lol).

    HAve you considered looking at porting it to other languages? It should be easy enough to port to most other languages??

  17. Remon Lammers February 1, 2008 at 1:53 pm #

    I think that on most mobile devices you would be best sticking to regular text versions. But in the future with better bandwidth on mobile networks and faster mobile devices who knows? The JavaScript has been kept as simple as possible in order to support IE 5.01.

    Porting the image creation to other languages is possible if they support using TrueType fonts. I know there is a GD wrapper for .NET called GD-Sharp. And ASP also has GDI+ that can do similar things. Could be interesting to look into in order to support other platforms besides PHP.

    Maybe after the next release and after the documentation has been updated. :-)

  18. Remon Lammers February 1, 2008 at 1:53 pm #

    I think that on most mobile devices you would be best sticking to regular text versions. But in the future with better bandwidth on mobile networks and faster mobile devices who knows? The JavaScript has been kept as simple as possible in order to support IE 5.01.

    Porting the image creation to other languages is possible if they support using TrueType fonts. I know there is a GD wrapper for .NET called GD-Sharp. And ASP also has GDI+ that can do similar things. Could be interesting to look into in order to support other platforms besides PHP.

    Maybe after the next release and after the documentation has been updated. :-)

  19. Kline February 1, 2008 at 5:49 pm #

    “I think that on most mobile devices you would be best sticking to regular text versions.”

    I was speaking about the higher end/future devices. android, iphone, future windows mobile phones etc all (or will) have fully featured browsers, and are on a decently fast connection. Nobody on an iphone wants to look at an all text boring WAP page, but Im not sure how many of these will ever support flash.

    @Mark, I have not looked at sifr3, but I had forgotten about text reflows as an advantage.

  20. Avatar of Kline
    Kline February 1, 2008 at 5:49 pm #

    “I think that on most mobile devices you would be best sticking to regular text versions.”

    I was speaking about the higher end/future devices. android, iphone, future windows mobile phones etc all (or will) have fully featured browsers, and are on a decently fast connection. Nobody on an iphone wants to look at an all text boring WAP page, but Im not sure how many of these will ever support flash.

    @Mark, I have not looked at sifr3, but I had forgotten about text reflows as an advantage.

  21. 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.

  22. 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.

  23. 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.

  24. 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.

  25. 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 ;-)

  26. 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 ;-)

  27. 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.