Using non-web compatible fonts

At some day in a web developers life you will no doubt be asked to use a non-web compatible font as per the designer used while designing the website in photoshop which we doesn’t use any time. We generally use “Arial, tahoma, verdana, Helvetica, sans-serif, georgia, comic sans ms, times new roman, trebuchet ms etc…” these are common fonts to all versions of Windows & Mac equivalents.

Before we used to make it as a image if the font used is non-web compatible. But now everything is changed, there are a number of different methods of using non-web based fonts on your website like:-

Cufon - It’s a JavaScript script that allows whatever special fonts a designer would like to use on a web page to be used by rendering them with <canvas> elements (or VML for IE):

sIFR - A open source JavaScript and Adobe Flash dynamic web fonts implementation, enabling the replacement of text elements on HTML web pages with Flash equivalents.

@font-face - allows authors to specify online fonts to display text on their web pages was first proposed for CSS2 but implemented 100% in CSS3 / HTML5 by resolving browser-compatible issues:

Google Web Fonts API - provides high-quality web fonts that you can include in your pages using two lines of code:

As font-face is a CSS based solution where as Cufon & sIFR is a JavaScript based solution but Cufon is faster than sIFR.

Advantages & Disadvantages:

  • Cufon & sIFR are both JavaScript based solutions so they wont work in a JavaScript disabled browsers.
  • Cufon should be implemented to a HTML tag directly, class is not preferred here for example h1-h6, p, font etc… where ever you write these tags it applies the font.
  • Cufon gives the output in browser as a rendered image, where we cannot copy the text for the cufon applied font.
  • Cufon doesn’t take line-height, hover states wont work and lastly not a browser compatible service. To resolve this issue we have to use a new script released recently. You can download it from here. (or)
  • <!–[if gte IE 9]> <script type=”text/javascript”> Cufon.set(‘engine’, ‘canvas’); </script> <![endif]–> (or) <meta content=”IE=8″ http-equiv=”X-UA-Compatible” />
  • sIFR gives the output as a flash object. You know the general problems we face with flash objects. it shows a dotted line around the object, line-height issues, margin, positing & lots more…

Why still some people goes for Cufon & sIFR because the fonts used were copyrighted by the owner. Prefer web Safe fonts which are common fonts for any OS (or) @font-face is the best option to use non-web compatible fonts in your website.

Comments are closed.