Before we start… our readers who don’t know about the fonts replacement techniques may wish to know the background information. Let’s start with ‘once upon a time’…
Some fonts that are available on your computer might not be available universally on all computers. This is ok, you can use any fonts you like, but if you design your website with such limited fonts, we have a problem. Because, in such case when someone opens your website and their computer does have the fonts used on your site, they will be presented your website text in different type fonts. Text style and type heavily affects the website presentation and you surely do not want your website to look different on different computers.
There must be a way around…
This through has started surfacing as soon as designers got a hold of the web as a design medium around 15 years ago. They kept asking, in the age of technology why are we limited to using those few boring fonts. Why can’t we use all of them?
The questions resulted in the answers and techniques like image replacement and sIFR fonts replacement became designer’s dream come true. They, specifically sIFR will remain the top option until something better comes along – which may have just happened! I am referring to the Cufón Fonts by Simo Kunnunen.
Cufón font replacement technique uses JavaScripts and vector graphics to write fonts to your browser from a font file. The complete reliance on JavaScript and no flash requirement makes it easier and faster compared to the sIFR.
This is how it works…
Cufón font replacement technique is very smart and of course technical. A javascript rendering engine takes your font file and then converts it in to a vector form. Once converted as a vector form it is translated to Vector Markup Language (VML). This way, the font outline is written as JSON and gets converted into string of numbers that define curve and angles of its shape. The VML technique is used directly to display the fonts in Internet Explorer since it has supported the VML since IE 5.5 and still does. For most other browsers, HTML5 Canvas element is used to display the fonts.
How does it compare with other techniques…
Cufón is easy to use compared to the sIFR font replacement technique. The font replacement process with Cufón involves uploading your font file to the replacement script generator, and then you can add the resulting file to your website. To render the fonts, you just have to add the rendering engine script to your page. With sIFR it’s slightly more complicated with flash based font file required to be generated.
Also, the file size is a bigger factor. Once you have done the font rendering and compressing, the font size is dramatically reduced by 60 to 80% then its original size.
The Cufón fonts are fully supported across different browsers and devices since there is no need to use flash. Those of us who use Iphone know that Iphone does not support the flash so sIFR font replacement will not work if you opened the website in Iphone. However, the Cufón fonts use theJavaScripts only and hence work on most devices.
Again, using JavaScripts only and with reduced size with compression the Cufón fonts are also light on browsers.
Conclusion
The Cufón font replacement is certainly not the ultimate answer with copyright issue that was in sIFR aso exists in Cufón, however, it appears to be the best so far.