Grow your CSS skills. Land your dream job.

Typeface.js – A sIFR Alternative

Published by Chris Coyier

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
</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.

Comments

  1. Permalink to comment#

    Seems not to work for me in both FF3 and IE7.

  2. Permalink to comment#

    my FF3, IE7, and Safari3.0, Google Chrome too.

  3. Permalink to comment#

    Same on Safari (Mac + Windows) !

  4. Is canvas good for SEO?

    As I saw the script generate a canvas tag for each word.

  5. Sorry folks, you are totally right, my testing was bungled here, I pulled that demo down until I can get it sorted out.

  6. Martin
    Permalink to comment#

    This looks great, one step closer to embed.

  7. This is a pretty sweet option. I don’t use any of the other tools because they don’t support copy-paste, and it always bugs me to use an image as a headline.

    This will be a great addition to my bag of tricks. Thanks!

  8. I wonder how much overhead an additional canvas tag for every single word creates – this might make this approach usable for headline use only. What about the file size of the generated js – can you specify on that?

    @Jason: sIFR does actually support copy & paste as long as only flash-rendered text gets selected. As soon as you try to select mixed text though, only HTML-text will be copied.

  9. Jeremy S.
    Permalink to comment#

    Wish we didn’t have to use inline styles. Though I suppose you could go through with jQuery and at least do it from one place.

  10. This is really nice :) since it’s made by css, js, html.
    This will include the utf8 support automatically :). unlike the sFIR it supports only latin’s.
    Thanx

  11. Permalink to comment#

    Can’t get it working here either.

  12. I have been trying and trying, but I’m at a loss here. I may ultimately pull the article if I can’t get it and don’t hear anything from the author.

    Sorry folks!

    If you actually go to the site, it’s in use all over there and clearly working, so it’s gotta just be something wrong with the version I downloaded or some other weird blunder.

  13. maybe its the font you used?

    other than that nice tut ;)

  14. Macrike
    Permalink to comment#

    It’s working fine for me. I’m testing with Museo and Museo Sans, and they both look cool.

    http://psnow.es/index.php/global/index2

  15. Works well in Safari on mac, but not in Firefox 2. haven’t tried it in any other browsers as yet

    but great little tool :-)

  16. Macrike
    Permalink to comment#

    My bad. It doesn’t seem to be working.

    I thought it was working because I still had Museo Sans installed, but when I disabled it the default typeface came up. So the .js is not working as intended.

    Strange… I was really looking forward to this.

  17. Macrike
    Permalink to comment#

    Just read the update, lol.

    So… I’ve tried various typefaces but only managed to get it working with Helvetiker.

  18. this is a really cool possibility to employ no standard fonts. since i don’t want to relay on flash for that, i loved to try that.
    I would not mind using the @font-face rule, as i dont care if some users see standard fonts, but it seems some browsers (like ff 2 or camino on mac, based on the same engine and also Opera) have problems to apply that when it comes to entities like &copy; etc.
    this is really cool. thanx for the intro chris!!

  19. Mark
    Permalink to comment#

    Is anyone having problems with using the script on H1′s seems to only work on divs

    Any help, would be great

  20. frujo
    Permalink to comment#

    That’s a pity this script is not working in Opera (I’m sure it is temporary). And also the big problem is a size of generated fonts. Sometimes they may be about 500 kB which is kinda huge. If those two problems will be solved somehow this script will be priceless, I swear.

    P.S. Adore the way it is possible to control output via CSS.

  21. Permalink to comment#

    got it to work, but when i went to convert my own fonts,

    the converter didn’t work.

    I’ll try messing around with it some more later on.

  22. @Mark, I’m also having trouble with H1s, if you look at the demo, Chris has used a div for the header also despite using H1 in the demo code on this page. I’ve emailed the author of typeface.js, hopefully this will be supported in future releases :)

  23. Permalink to comment#

    It seem that the text can’t be selected. In that case, I think image replacement would be easier.

  24. PY
    Permalink to comment#

    Can’t select headline either, on FF3 mac, or on safari…

    On FF3 “Quiet down you crazy kids!” doesnt appear clearly. Appears as regular font on safari and is, therefore selectable.

    Seems like a great plugin thouhg!

  25. Sam
    Permalink to comment#

    Ya looks pretty good. My thought is how this affects SEO for the used items. You guys don’t have any worries about that?

  26. frujo
    Permalink to comment#

    @Sam
    It doesn’t affect SEO at all, as soon as text is replaced with SVG-image only on the user’s screen still being available (with the same SEO-weight) for search-engines inside your code.

  27. axiom
    Permalink to comment#

    As far I can tell, the only tags you can use this on are div and span.

    So, the heading tag given in the example will not work. (I’d like to be wrong about this :P)

  28. This is a great proof of concept. But I personally think the usage is somewhat limited. Although it could be the start of something great. The great this is that it uses only Javascript and it is completely client-side.

    The downloads are a bit big, but if they would be hosted on a central server people would only have to download the script once. There are however the obvious copyright issues.

    There are also other alternatives that use PHP and Dynamic Image Replacement (DTR) like FLIR (variation on sIFR) and True Font Family (created by myself).

    True Font Family is completely configured by CSS and supports @font-face in older browsers. Every solution has it’s downsides and advantages. It is up to yourself to choose the one that bests fits your needs.

    If you would like to know more about True Font Family you can check out the website at: http://www.truefontfamily.com. There is a free version and a professional version for commercial use.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".