Technology Update

Cufón: Custom Font Embedding Technique for Web

Cufón, pronounced as attributes of Cufón font selectors. Koofo, is one among the Well, such other techniques, even popular font replacement with their certain merits, still remain any of you would painfully tricky to set up and use. techniques of its kind, have been curi- Prior to these developments, web which has attained much ous to know how sites were constrained by pages dis- attention and popularity someM websites and blog pages display playing only the web-safe fonts, awesome choice of fonts with which are still a handful. Though among web developers. smoother curves on your browsers. designers and developers used Thanks to Simo Kinnuenen, You would have also noticed that images and splash as alternatives a Finland-based web guru such web pages stand out visually (many still do the same), these are attractive and mind grabbing. Well, either non-accessible, non-scalable or who developed this kudos to the several researchers and require plug-ins to display such vari- technique, which has web developers for their efforts in ety of fonts on web pages. evolved and enabled us to making it possible for us to embed numerous customized fonts so as to WHY CUFÓN? use non-web, based fonts on make the page look unique and spe- Cufón has a better edge over the oth- web pages with much ease. cial. Now, with some extra effort ers due to its specific merits: along the process of website develop- ment, you too can make this happen 1. It uses features that are natively on your website. Needless to say, all supported. Hence the client these come with some concerns of machine requires no plug-ins. fonts licensing and certain technolo- 2. Ithas better Browser Compatibili- gy limitations for accessibility and ty. Cufon works on every major user experience. Like many other browser available on net now. designers who admire and get 3. It is easy to use. Cufon requires no inspired of the beauty and function or almost zero configuration for of fonts, which significantly enhance standard use cases. the web surfing experience, I happen 4. Speed of rendering is fast, even for to be one who is curiously observant sufficiently large amounts of text. about how emerging technologies draw and extend boundaries for HOW DOES CUFÓN WORK? expanding possibilities. Cufón setup and use consists of two individual parts - a Font Generator, CUFÓN which converts fonts to a proprietary Cufon is a JavaScript based font format and a Rendering Engine replacement technique, a popular of written in JavaScript. its kind and an effective alternative to the earlier techniques such as sIFR THE FONT GENERATOR (Scalable Inman Flash Replacement) This is a bit more than a web-based and FLIR (Face Lift Image interface to FontForge (a typeface Replacement). Cufon emerged editor program). Initially, the genera- MOHAN DAS Technical Director trumps among the others for many, tor builds a custom FontForge script NIC HQ being faster, by using normal CSS based on user input and then runs it, [email protected] (Cascading Style Sheet) to change the which saves the font as an SVG

July 2011 informatics.nic.in 27 Technology Update

(Scalable Vector Graphic)font. The sets of drawing commands provided by tion visually but when you select it and SVG font is then parsed and its path the canvas API. This turns out to be hit ctrl+c you will be able to paste it.) converted to VML (Vector Markup somewhat tricky initially, but a solu- In screen readers, each word in text Language) paths. The resulting docu- tion emerged after the second Engine rendered by Cufón being a separate ment is then converted to JSON complete rewrites in the form of code span element, it makes several screen (JavaScript Object Notation) with a generation and caching, resulting in a readers such as VoiceOver, FireVox, blend of functional Javascript. This very fast renderer. Inline SVG is sur- ORCA, Window-Eyes and Opera Voice has many advantages: prisingly slow in a few browsers that read: The. Text. As. If. Each. Word. really supported it properly. Was. Separated. By. A. Full. Stop. In To include a font, one just needs to some cases the screen reader will stop load it with the standard