Today we're going to have a look at a few popular font replacement methods. sIFR, Cufon and the new, still in beta TypeKit. All three of these services have their pros and cons, with Cufon you can't select text, sIFR relies on Flash and TypeKit... I don't know, haven't played with it yet.
We'll start with sIFR, I haven't used sIFR. sIFR stands for Scalable Inman Flash Replacement. sIFR is used to replace small amounts of text such as a heading, it's not meant to replace the full body content.
sIFR looks like the most complicated method from the three which is why I have avoided it until now.
First you need to download the sIFR files, when you do that unzip and open the folder and open up the sifr.fla file. I done this with Flash CS4 and it didn't work, I think it may be the same with CS3, so if you're having this problem try this download instead, the file you need top open is sifr-cs3-and-up.fla, not sifr.fla. It worked for me.
After you open sifr.fla double click the white area and from the properties panel choose a font. I chose the font "Aller Display" which is what imawebdev uses in the logo, nav and blog post titles.
When you change the font you need to export it as a swf. Do this by going to File>Export and choose Flash Movie, name it as [fontname].swf and save it in your sites root directory.
When you do that you need to grab the sifr.js file and sIFR-screen.css and bring them into your sites directory. I made a CSS and scripts folder to keep everything together.
<link rel="stylesheet" href="css/sIFR-screen.css" type="text/css"/> <script src="scripts/sifr.js" type="text/javascript"></script>
Make sure to change the root to the files if yours are different from mine. Now you have everything you need to start.
<h1>This is a heading 1 tag.</h1>
Now you need to call sIFR:
<script type="text/javascript">
if(typeof sIFR == "function"){
sIFR.replaceElement("h1", named({sFlashSrc: "allerdisplay.swf", sColor: "#000"}));
};
</script>
The important part here is "sIFR.replaceElement" this is where the magic stuff happens and makes our fonts look pretty. The first parameter is the selector, this can be the html element such as h1, h2 etc or a class (.className) or ID (#idName) Then we have the path to our font swf. Mine is in the same directory as the html page so make sure if you have your somewhere else you type the path correctly. The last parameter is the colour which is pretty self explanatory. So now you have a page using sIFR for font replacement, not as hard as it looks, is it?
sIFR in Safari
Next we'll try Cufon. I thought it took a lot less work with Cufon which is why I've never used it, but it's bout the same as sIFR only there's no Flash involved.
The only big disadvantages I've found with Cufon is that it waits until your page is loaded before it replaces the text so you see a plain font first and the second is that you cannot select the text properly. Despite those problems it is very easy to set up. All you have to do is download Cufon from the site, upload your font, get the generated JavaScript then add the JavaScript in the html page to tell it what to replace, quite simple.
First thing we'll do is download Cufon from the Cufon site. I saved mine as "cufon.js" in the scripts folder in my site.
Now you need to go find the font you want and copy it to the desktop. Once you do that you goto the Cufon generate page. Here you upload your font, select a few options and take the file it gives you. I leave everything the way it is as that's usually enough for what I need. You can choose to upload the bold and italic versions as well but I usually leave this as I only use it for headings so only need the one version.
You can choose to limit the usage to the one domain, this is sometimes required if you're using a commercial font. Once you click "Lets do this" it should automatically download the .js file.
That's the hard part done now. Call both files in or if you want you could save on http requests and put the code from the font file at the bottom of cufon.js. I will leave it how it is for this tutorial.
<script src="scripts/cufon.js" type="text/javascript" charset="utf-8"></script> <script src="scripts/allerdisplay.font.js" type="text/javascript" charset="utf-8"></script>
It's very important to make sure that you call cufon.js before the font JavaScript.
Note: I was generating my font JavaScript using Google Chrome on Mac and it was giving me some problems, I used Safari to generate it and it worked fine. The font replacement still works fine in Chrome though.
Next we need to tell Cufon what we want to replace. The following code will do just that:
<script type="text/javascript">
Cufon.replace('h1');
</script>
There are several other configuration options, you can see all of these over at the Cufon wiki.
Cufon in Safari
So now we've had a go with sIFR and Cufon we'll not have a go with TypeKit. TypeKit works slightly differently from sIFR and Cufon, you must se the fonts they provide, they do however have a wide range for you to choose from with a trial account and more as you go through the different payment options.
TypeKit is probably the easiest of the three to set up as the TypeKit site does most of the work for you. This is the first time I've used TypeKit and after watching the screencast by Jeffrey Way from nettuts+ and getting an idea of what's involved, I'd say it took less than two minutes to get it working.
When you login to TypeKit you'll be asked to create a new kit, enter the name of the site and the URL. I used "localhost" for the URL since I'm testing everything locally, you can change the URL later on if you wish.
On the next screen you will be presented with the HTML needed, put this in the <head> section of your page. Now you can go choose a font, look through the list and when you find one you like click add, I chose Good Dog as it was the first and it would be quite noticeable when I applied it to my page.
No all is left to do is tell TypeKit what selectors to use to apply the font to. I'm just going to apply it to all <h1>'s, do this simply by entering "h1" in the Selectors box and click add. I also got rid of the class they had in there for me as I wouldn't be using it.
Clicking on the "Advanced..." link gives you some other ways to use TypeKit using CSS giving you full control over it but what they offer is enough for me. Don't forget to click publish or else you won't see any of your settings applied.
And this is how TypeKit looks in Safari.
So that's three different methods of using cool fonts on your website. I'm really loving TypeKit at the minute, so much easier to set up than sIFR and Cufon.
Click the links to see each of the three services in action. sIFR, Cufon and TypeKit.
The awesome guys at TypeKit have given me an extra 50 invites to share with you guys. @imawebdev on Twitter and we'll send you one!