Thursday, August 04, 2011

Web Fonts: Custom Fonts Using @font-face

Web based platform are increasing in popularity day by day and a huge portion of ‘netizens’ completely depend on internet for their various needs. No wonder then that most of that companies are going online and one of the most important requirements of such sites are the way they are ‘written’, i.e. the fonts they use. Different fonts provide different user interface(UI) or ‘emotions’ of their respective sites and the users browsing a site are often drawn to such sites by the type of font that the site is using. For e.g. a business site which is a formal site and is used by corporate often goes for a simple and soothing look and feel fonts like ‘Arial’ or ‘Verdana’ while a site dedicated to kids might use high fashioned and colorful fonts which would help to attract kids.

The one problem that the webpage’s had in the previous version of the CSS was that it could only ‘read’ and display fonts that were installed or present in the user’s local PC. But this had some serious disadvantages. Problems like ‘Would my site appear clean and formal to my clients (the users who browse my site) when some of their PC’s might not have the font ‘Arial’ installed (don’t worry, this is only an example as Arial is present in almost all the PC’s and laptops…)’ or ‘would my music site have the perfect rock star look and feel on it?’. Could there be a way where we could dynamically embed font’s that are not in the user.

Before ‘tested’ font embedding methodologies came onto existence, there were a couple of services which were used by the webmasters for recreating the ‘look and feel’ of embedded fonts. They are as mentioned below:

1. sIFR – Takes the help of Javascript and flash to provide the ‘embedding effects’ of different fonts.
2. Cufon – This converts the fonts in SVG format and then uses JavaScript to render the same to various webpages.

Read more: Design modo
QR: https://chart.googleapis.com/chart?chs=80x80&cht=qr&choe=UTF-8&chl=http://designmodo.com/custom-web-fonts-fontface/

Posted via email from Jasper-Net