I always wondered why the sites like Mathrubhumi.com forcing its visitors to download and install their own custom font when they can simply link to their fonts in their CSS so that the browser will download the font automatically and render it.

Normally the visitors can only see the fonts that are already installed on their computers. So if you use a font that is not installed on your website visitor’s computer then his browser will show some other font that is there on the computer.

Google Web Fonts is a huge collection of custom fonts for your web pages which can be integrated to the page easily. All fonts that you see on my this blog uses fonts from Google Web Fonts. But what if Google Fonts doesn’t have the font that you want ?

Today, one of my good friend Vineeth tweeted a link to a post on a website that shows some custom fonts for the web pages. They also provide link to download the font to your PC.

Adding a custom font to your web page can be done easily using CSS.

[code]
@font-face {
font-family: Ribbon;
src: url(‘Ribbon.otf’);
}
h1#custom {
font-family: Ribbon;
}
[/code]

You can link to a font using @font-face in CSS. Ribbon.otf is the font file name. It can also be a .ttf
file.

Once you have linked to the font, you can change the font of different elements using font-family

The conventional way of showing texts which use custom font is to create a jpg or png using photoshop of any image editor, upload it and show it as image. However, this really has bad impact on SEO. So this CSS method is highly recommended.