Webucation Wednesdays is our new weekly column.In it we will discuss a popular web techniques and tools, however it will not be a tutorial. It is going to be more about educating you about the tools and techniques that are out there than showing you how to use them.
This week we will be discussing some popular text replacement libraries and their limitations and potentials.
- sIFR
sIFR is one of the original font replacement techniques, and is one of the most complicated. It involves saving a flash movie with your font in order to allow the glyphs to be displayed when called for by your site. This site currently uses sIFR. The official sIFR 3 Beta site has examples you can take a look at. (I don’t think they play too nice with internet explorer, and since that is what is on my loaner computer…) And, as they themselves say, this is an OK solution for now, but not the answer for the next 20 years. - FLIR
Facelift is a little different than sIFR. It does not require Flash to run, so there is wider browser support for this option. You can style the text just about any way you would like. However, there are drawbacks here as well. If the user has images disabled, they will not see the pretty text. It does support links and will change colors on hover. - Cufón
This javascript library is quite promising. No images or Flash required to make the font replacement work. Hover has to be enable specifically for elements on which it is needed and Cufón replaced text is not selectable. But for a highly simple and easy to configure solution, this is a definitely an option to consider. - typeface.js
This javascript library is infact quite similar to Cufón, it allows for a little bit easier uploading, hoever it only accepts TrueType fonts. Typeface.js allows use of a greater range of CSS selectors than Cufón, but it is a little larger, and the spacing out of the box is a little bit off (although that can be fixed with a little bit of CSS magic). Typeface.js also provides you with selectable text. - Typeselect
This was originally built on the typeface.js library before typeface.js added selectable type as a way to make the type selectable. However, it is a strong solution in its own right. It uses jQuery (which means it will play nice with what I build) but there is currently no suport for :hover or line breaks. This is a promising library that I intend to follow until either they get the kinks worked out, or all browsers on all computers support @font-face. - @font-face
The holy grail of font replacement. What we have all been waiting for. The CSS3 specification that allows us to use our fonts without having to worry about sacrificing accessibility, design or functionality. The support is coming. Webkit browsers support it (Safari and Chrome). So does Firefox (as of 3.1). And, heck, even IE does. The specifications are not yet final, so your CSS might not validate, but you can start including it in your work. (And here is an article on how to make @font-face work with Cufon so the js only gets executed if the user has a browser that is incompatible with the CSS property. Nifty, eh?) - HTML/CSS/IMG Phark Method
What most of us do (or should be doing). Using a background image for a header with the text displayed at -9999px (although I think I read that this could do bad things to your Google Page Rank and that you would be better off with an image and alt text for SEO, but this is better from a usability standpoint)
Want to know if you can embed that font? For sIFR you can use any font that you can embed in a PDF or Flash file. For the others you need to make sure your license allows the use. FontSquirrel has a nice list of @font-face ready fonts (for free) that can be used with any of the above methods.
(Image credit sindesign)
