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:-
@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: www.fontsquirrel.com/fontface/
Google Web Fonts API - provides high-quality web fonts that you can include in your pages using two lines of code: http://www.google.com/webfonts
Advantages & Disadvantages:
- 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)
- 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.