Wednesday, October 6, 2010

Font Replacement


Don't want to use web safe fonts or the @font-face style for the typography on your website? Many users are still without modern browsers and you have options.  The first is image replacement, and this doesn't just mean throwing in a JPEG of a word or two. Cufón and Typeface.js are font replacement tools that use JavaScript to create vectors of your font files and display it in the canvas tag in modern browsers (or VML in Internet Explorer). Simply upload the TTF (Typeface.js can only use this), OTF, or PTB font file of your choice and Cufón or Typeface.js will allow you to just enter in text in your HTML and have it displayed using your desired font, when implemented correctly.

They require no plugin as they relies only on JavaScript (and if JavaScript is disabled, they will display the text using a web safe font). Depending on how they are implemented, the text is selectable. A number of CSS text effects can be applied to the text. Be wary of licensing restrictions placed up the fonts you want to use (look for a post later on open-source and embeddable free fonts). An example of Cufón is below.

With JavaScript:



With JavaScript disabled, using fonts from your computer:




More information on Cufón can be found here: http://github.com/sorccu/cufon/wiki/about
More information on  Typeface.js can be found here: http://typeface.neocracy.org/usage.html
A comparison of the two: http://kilianvalkhof.com/2009/javascript/cufon-vs-typefacejs-which-one-is-better/

No comments:

Post a Comment