Sistr

Note: Sistr is development is now being run by a combination of These Days, Venitgrate, and Microsoft. The new home is http://www.sistr.it/

Sistr allows you to render text elements in an HTML page using the Silverlight plugin -- similar to the sIFR project, which uses Flash.

Note: This definitely isn't ready for a production site, this is an early version for feedback purposes only. There are still plenty of bugs, trust me.

Usage

  1. Download sistr.js and save it to your web server (or reference it directly from this site).

  2. Create a zip file with the font(s) you wish to use. Upload this to your webserver as well (Silverlight will only use fonts that are retrieved via HTTP).

  3. Add the following into your HTML page:

    <script type="text/javascript" src="sistr.js"></script>
    
  4. In your CSS file, define a new class called sistr-replace (anything that starts with "sistr-" works). Here's an example:

    .sistr-replace { }
    
  5. Use the font-family property to set the font name and URL to the font files, enclose them in quotes and separate with the "|" character (e.g. font-family: "Fil's Font|filfont.zip"). Make sure you also specify backup fonts for users who don't have Silverlight installed, like so:

    .sistr-replace { font-family: "FontName|fonts.zip", Verdana, Arial, Sans-Serif; }
    
  6. Set the class property on some of your HTML elements to sistr-replace (or whatever else you used) and re-load. For example:

    <h3 class="entry-title sistr-replace">Hello World!</h3>
    
  7. Your text should now be rendered using Silverlight.

Take a look at the demo test page as well.

Pros & Cons vs. sIFR

Pro:

Con:

Known Issues