sIFR Generator

Tutorial

Ok, so you've made these cool sIFR SWF files containing your cool fonts, and now what?

Documentation for sIFR is sometimes not very clear, so we have set up a small tutorial that contains a minimal example.

sIFR works with two CSS files (one for screen and one for print) and a Javascript file. Additionally, all fonts are contained in SWF files.

First, add the CSS and JS files in the HEAD of your document

<link rel="stylesheet" href="/css/sifr-screen.css" 
                                type="text/css" media="screen" />
<link rel="stylesheet" href="/css/sifr-print.css" 
                                 type="text/css" media="print" />
<script src="/js/sifr.js" type="text/javascript"></script>

The files that we provide contain styles for H1 H2 H3 H4 H5 and .sifr. If you want to use sIFR with other classes, you'll have to change sifr-screen.css and add styles for the classes that you want to use.

Now build your page as usual.

At the bottom of your page, just above the </body> tag, enter the following Javascript:

<type="text/javascript">
//<![CDATA[

if(typeof sIFR == "function"){
// This is the preferred "named argument" syntax
	sIFR.replaceElement(named({sSelector:"h1", 
	                  sFlashSrc:"/swf/tradegothic.swf"}));
	sIFR.replaceElement(named({sSelector:"h2", 
	                  sFlashSrc:"/swf/tradegothic.swf"}));
	sIFR.replaceElement(named({sSelector:"h3", 
	                  sFlashSrc:"/swf/tradegothic.swf"}));
	sIFR.replaceElement(named({sSelector:"h4", 
	                  sFlashSrc:"/swf/tradegothic.swf"}));
	sIFR.replaceElement(named({sSelector:"h5", 
	                  sFlashSrc:"/swf/tradegothic.swf"}));
	sIFR.replaceElement(named({sSelector:".sifr", 
	                  sFlashSrc:"/swf/tradegothic.swf",
                      sColor:"#ff0000",
                      sBgColor:"#ccccff"}));
}
//]]>

You can of course change the selectors and the SWF filenames as you like.

You can view the result here and download a zip file with all the files here.