How To Use sIFR To Do Font Substitution

Background info

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.

• Overview of sIFR
• Official sIFR Wiki/Documentation

How to implement sIFR in a Plone site

Following are the rough steps for implementing sIFR text replacement in a Plone site.  These instructions assume that you are comfortable modifying Plone templates, registering stylesheets and javascripts, and customizing CSS styles.

1) Put the following files in your skins directory, either via ZMI or in a custom Product

• yourfont.swf
• sifr.js
• sIFR-print.css (rename to sIFR-print.css.dtml if you're doing a Product)
• sIFR-screen.css rename to sIFR-screen.css.dtml if you're doing a Product)

2) Register sifr.js in portal_javascripts

You can do this via the ZMI or via configuration code in your skin Product.

3) Register sIFR-print.css and sIFR-screen.css in portal_CSS

You can do this via the ZMI or via configuration code in your skin Product.

4) Invoke sIFR by editing sifr.js

This is where you'll have to decide how to configure the sIFR replace settings, the documentation is helpful here, especially the "Replacement Syntax" section.

At the bottom of sifr.js you'll find the following statement:

if(typeof sIFR == "function" && !sIFR.UA.bIsIEMac){
        sIFR.setup();
};

Modify the statement with appropriate formatting statements, for example:

if(typeof sIFR == "function" && !sIFR.UA.bIsIEMac){
sIFR.replaceElement("#portlet-email-capture>.portletHeader",
named({sFlashSrc: "/futuracondensed.swf", sColor: "#336633", sCase:
"upper"})); sIFR.replaceElement("#portal-tagline>h2",
named({sFlashSrc: "/futuracondensed.swf", sColor: "#336633", sBgColor:
"#E5EBE0", Case: "upper"})); sIFR.setup();
};

5) Tune your fonts

Modify your custom CSS file (likely ploneCustom.css) as needed to tune the CSS of your replaced items and influence the replacement font sizes. Again, see the sIFR documentation for specifics.

6) Suggested guidelines for using sIFR wisely.

This is a powerful tool, but has some limitations. Some of our suggested "best practice" guidelines for using sIFR include:

• Keep the total number of replacments on a page under 10.
• Good things to sIFR
  • Taglines
  • Portlet headings
  • Top-level nav items (Maybe)
  • Document titles
• Bad things to sIFR
  • Navigation listings
  • Lower-level subheadings
  • Links (see the section in this page titled "Using sIFR for links")
  • Body text (!)