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.
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.
Seems not to work for me in both FF3 and IE7.
my FF3, IE7, and Safari3.0, Google Chrome too.
Same on Safari (Mac + Windows) !
Is canvas good for SEO?
As I saw the script generate a canvas tag for each word.
Sorry folks, you are totally right, my testing was bungled here, I pulled that demo down until I can get it sorted out.
This looks great, one step closer to embed.
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!
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.
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.
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
Can’t get it working here either.
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.
maybe its the font you used?
other than that nice tut ;)
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
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 :-)
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.
Just read the update, lol.
So… I’ve tried various typefaces but only managed to get it working with Helvetiker.
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 © etc.
this is really cool. thanx for the intro chris!!
Is anyone having problems with using the script on H1’s seems to only work on divs
Any help, would be great
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.
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.
@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 :)
It seem that the text can’t be selected. In that case, I think image replacement would be easier.
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!
Ya looks pretty good. My thought is how this affects SEO for the used items. You guys don’t have any worries about that?
@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.
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)
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.