Web Font Embedding: Cufon is the future, bye sIFR

Everyone wants to be unique, especially on the web. Graphic designers are able to create different feelings and evoke different emotions through illustrations and fonts. Using fonts can be tricky but when you’ve found the one that matches your personality, you’ll always want to use it. I’ve run into several instances where I wasn’t able to use a particular font on the web because it wasn’t deemed “web safe”. I found several solutions out there, the most popular one being sIFR. Seemed a lot of people have tried to desperately learn how to use this complex tool and have frustrated a good amount of people that I wasn’t about make the attempt myself. I found similar experiences with Subversion (which I did attempt), but that’s another topic. During my search for a solution, what I found, was recently released and named “Cufon”. A javascript based tool that allows you to create an embedded font into a javascript file whereby the font is drawn using vector graphics via javascript. What impressed me was that this tool worked flawlessly and consistently in all browsers, including IE6. It is a great alternative to sIFR and is supported by the gitHub community. In terms of the details of how it works: “The renderer is a bit more complicated. It consists of 3 parts – a Core, which provides the API and common functionality, and two rendering engines. One of them renders VML shapes and is used for Internet Explorer (it supports VML from version 5.5), while the other one uses the widely supported HTML5 <canvas>very fast renderer element. Due to the path data already being VML, little work is needed in the VML engine. The canvas engine, however, must convert all paths to the corresponding sets of drawing commands provided by the canvas API. This turned out to be somewhat tricky at first, but a solution was found after two complete rewrites in the form of code generation and caching, resulting in a Inline SVG was also considered but quickly turned down due to it being surprisingly slow in the few browsers that actually support it properly.” The simplicity of this thing still blows my mind, especially at how flawless it works. You literally add one line of code at the top of the page, one at the bottom. It doesn’t get any simpler than that. Although most would think of this as the last thing when building a site, this tool is fully accessible - all the text can be read using JAWS. How is that possible you ask? It’s because the text that you write in your source code still exists but you just can’t see it. Using CSS the original text is hidden and the png letters of your font is placed on top – all dynamically when the page loads. There are various font types that can be used with this awesome tool. Check it out to learn more.

Jamie currently works at BMO Financial Group, freelances with Studio Diversity, and pushes the boundaries of his skills in fine art, innovative thinking, photography and user-centered design. He is happily married with Sarah living in downtown Toronto.

Tagged with: , , , , , , , ,
Posted in Blog, Web Development

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>