Typeface.js – A sIFR Alternative

Avatar of Chris Coyier
Chris Coyier on (Updated on )

My last screencast was on how to use sIFR3, a long proven technique for using non web standard fonts on the web (like we’ll be doing until @font-face has wider spread support). I like sIFR, it has been around a long time has really proven itself as a good technology, but it’s not the only kid on the block.

David Chester wrote in to tell me about a new project he is working on called typeface.js. I played with it a little bit and it was pretty easy to use and worked well.

View Demo   Download Files

Note: I only include the download here because there isn’t a “complete working example” style download on the website itself. It took me a little bit to figure out exactly how it worked and where things go, so I thought this might be of assistance.

UPDATE: OK, the demo is back working again… the problem was that I was using quote marks around the font name and that was messing it up AND I applied multiple fonts (e.g. font-family:Optimer, Arial;). To have it work properly, don’t use any quotes and only apply the one font (e.g. font-family:Optimer;). The font I used in this example, Qlassik, is still not working correctly. In hindsight, I probably shouldn’t have used some random incomplete font =)

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

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.


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.