Achieving a strong brand online is often challenging when it comes to the use of a corporate font. The standard methods are either using a system font that is likely to be available on your target audience’s devices or to use images to render fonts exactly the way you want them to appear. Latter method has a number of disadvantages: not SEO friendly, not CMS friendly, bad performance due to higher load times and not favorable from a WAI perspective. Using system font on the other hand is disadvantageous with regards to branding other than if your CI font happens to be Arial (or one of the 10 or so widely available standard web fonts).
Recently I stumbled upon a new method called cufón and I decided to use it for a new project. The installation of the demo was really easy and results looked totally the same on all browsers. The method sounds more complex in terms of what technically happens but neither the developer nor the end user notices any of this. Cufón consists of two modules: a font creator converts a font into VML paths (I am using this awesome site) which are then put into the web directory of your choice together with one more JS file. Just like sIFR you are using regular HTML markup and apply a special CSS class to the parts you want to be picked up by cufón for font substitution. Just like sIFR, cufón will also degrade to HTML if scripts are disabled on the target device.
The results are amazing: it’s super fast, excellent rendering and works on all browsers and platforms. The only disadvantage is that text is not selectable as every single word is put in one <canvas> tag. In IE 6 where <canvas> is not available a different method is used which allows to select text but only one word at a time. We are currently developing 2 new projects using cufón and we will post results here as soon as we go live.
Update: There is quite a bit of write-up on the net comparing different font rendering methods:
Comments ( 1 Comment )
Add a Comment
Additional comments powered by BackType