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.

Please hang on while
your font is being generated
loading