The Best sIFR Alternative - Typeface

Posted on October 29, 2008 - by admin

The Best sIFR Alternative - Typeface

sIFR has been great… Say good bye to it thou, because there is a new alternative in town! Typeface does everything sIFR does but better. I have been fooling around with it and now its your turn to use this superior JavaScript over text repalcement.

How to use it

1. Download it

Download it from here and include it on your page. Include it after any external stylesheets.

2. Find a font you want to use

David offers three you can download and use. Otherwise, go out and find a TrueType font that you like (that you can use without breaking any copyright laws!). For my example, I snagged a free on off DaFont: Qlassik. (* problematic, see above)

3. Include it on your page

Then run it through the convertor (at the bottom of the page). This will result in a new js file, include that on your page after the typeface.js file. Remember again these should come after your stylesheets

<script type="text/javascript" src="js/typeface-0.10.js"></script>
<script type="text/javascript" src="js/qlassik_medium_regular.typeface.js"></script>

4. Starting using it in the markup

Now you are ready to start using it! Any text you want to use the new font, you’ll need to give a class name of “typeface-js” and then an inline styling statement referencing the new font name.

<h1 class="typeface-js" style="font-family: 'Qlassik Medium'">
	Testing a Headline
</h1>

You’ll need to reference the font by its proper name. I find the easiest way to find out its proper name is to install it and then find it in the font menu of any open application.

Thoughts

I’ve been playing with this for maybe one hour, so I’d not going to make any snap judgements or recommendations, but it seems pretty cool so far. Something feels neat about the fact that it’s just JavaScript, not both JavaScript AND Flash like sIFR. or JavaScript AND PHP like FLIR.

I also kind of dig how copy and paste still works on browsers that support <canvas>.

It is also pretty easy to get started! Let me know what you all think.

This entry was posted on Wednesday, October 29th, 2008 at 12:50 pm and is filed under JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Posted on October 29, 2008 - by admin