It is a common scenario to see. Most websites used either Verdana, Sans, Arial as standard font. However, I've encountered a website related to web awards where it used a specific font such as "Century Gothic" as part of its header & sub-menus.

How excatly they o this? I noticed they are using CSS2 to get such effect. Any ideas on how to build such CSS?

Presumably, your style sheet would look like:

.body{
          font-family: Century Gothic, Verdana, Geneva, Arial, Helvetica, sans-serif;
          }

The reason people choose very common fonts like the ones you mentioned and have several ordered examples, is the clients computer must have them installed for the clients browser to display them.

Else what happens is the next font in the list is what is used. So, let's say 4% of users have century gothic installed on their systems. That's how many will see it the way you intended. The rest get Verdana in the example above.

If it's not SEO relevant, you could make an image of the area you want a decorative font for..

If you want to use flashy looking, non web standard font there's a couple of ways to do it so it still looks smart on every client viewing it.

1 = Create an image and use css to do some image replacement - there are a few methods to do this which have been written up on Dave Shea's mezzoblue site. There's loads more if you google for 'css image replacement' or 'css replace images'

2 = You can use SIFR to do it for you in flash.

What is SIFR? wrote:

http://wiki.novemberborn.net/sifr/What+is+sIFR

sIFR (or Scalable Inman Flash Replacement) is a technology that allows you to replace text elements on screen with Flash equivalents. A high quality cross-browser, cross-platform typography solution for the masses.

Put simply, sIFR allows website headings, pull-quotes and other elements to be styled in whatever font the designer chooses - be that Foundry Monoline, Gill Sans, Impact, Frutiger or any other font - without the user having it installed on their machine.

sIFR requires JavaScript to be enabled and the Flash plugin installed in the reading browser. If either condition is not met, the reader's browser will automatically display traditional CSS based styling - the user won't know the difference.

You can even cut and paste the resulting flash file as if it were normal text, read up further on the SEO implications if you fancy using it.

Someone I was talking to recently told me they are using SIFR, take a look at this page with and without flash and javascript enabled to see the difference SIFR can make.

Yes, that exactly answered my question. Too bad, I'm not familiar with SIFR. Does it require any modification to the existing CSS? I've been using images to replace this conventional text but this method consumed my storage. The worst is, those search engines will not be able to crawl those <H1>, <H2> if I used image replacement via CSS.

i've not used it myself yet, am toying with the idea of using on one project in the future.

well, sIFR indeed a new thing for me but it is fun and attractive to explore. One thing I don't like is, it relies totally on javascript and flash rather than normal characteristic of CSS2, even though sIFR needs to be configured using CSS. The question is, how many people use a javascript enabled browser? Who knows but I believe it is worth the effort to have such features available in my website. No major customization nor re-design the page structure..WOW.

Unlike CSS2, implementing sIFR is limited. Even the developer doesn't recommend to make full use of it except for certain portion of the website.

What you should use sIFR for
sIFR is intended for headlines. While it is possible to use sIFR to replace other elements, such as paragraphs or list items, this is not recommended. Please also be careful with replacing links: browsers treat links in Flash movies differently than normal HTML links, so you may hurt usability if you use sIFR to replace links.

Well, since my primary intention is to have a customized headlines for H*, I might implement this thingy in somewhere this week. March forward!

Well guys, I've implemented sIFR into my website basically on the headlines. It's ok but the page load a bit slower due to javascript.