how to add a font file to my website?

1. Locate And Use The Font

Finding fonts is easy. Open your favorite search engine or directory and search on terms like "free fonts" or "downloadable fonts." A recent search on Google under the term "free fonts" returned 112,000 hits. Once you've found the perfect font, you're ready to download it to your computer and use it in your page design.

Do some research first though: some designers don't allow their fonts to be embedded. TrueType fonts have embedding permissions encoded within them. Please respect the designer's wishes to avoid any potential copyright problems!

2. Create An Embedded Font File

You have to use a third-party application that creates an embedded font file using the font you installed locally on your hard drive. This task may be time-consuming because Netscape and Explorer both use different formats.

Recently though, Netscape updated its method to support Explorer browsers. Microsoft continues to use a proprietary technology.

Create embedded fonts using one of 2 available formats:

   1. Portable Font Resources (.pfr): TrueDoc technology was developed by Bitstream and licensed by Netscape. It can be viewed by Navigator 4.0+ and Explorer 4.0+ on Windows, Mac, and Unix platforms.
   2. Embeddable Open Type (.eot): Compatible only with Explorer 4.0+ on the Windows platform. Create .eot files using Microsoft's free Web Embedding Font Tool (WEFT). 

After you've created the embedded font file, you're ready to attach it to a CSS.

3. Attach To Your Style Sheet

Instructions for this step depend on the type of file you created in step 2:

    Attaching A TrueDoc File

Insert a LINK tag between the opening and closing HEAD tags to attach a TrueDoc font:

<LINK rel = "fontdef" src="url/YourFontName.pfr">

If you want this to work in Explorer 4.0 and above, you need to add a pointer to an ActiveX control immediately after the LINK tag. TrueDoc.com has a tutorial on their web site that discusses this process. Otherwise, you can create an OpenType file for Explorer and refer to both on your page.

TrueDoc fonts stay within the browser: you can't download them to your system to use for other applications. This security feature protects visitors from inadvertently downloading malicious code and also protects the developer who may have designed the font or paid to use it.

     Attaching An OpenType File

Attach an OpenType file inside your style sheet:

<STYLE TYPE="text/css">
<--!
@font-face {
  font-family: Arial;
  font-style:   normal;
  font-weight: normal;
  src:url(http://www.SiteAddress.htm/EOTfileName.eot);
}
-->
</STYLE>

Unlike TrueDoc, OpenType files are accessed by the user's operating system. This means that users have the ability to download and use fonts on their own systems. This is a problem only if you're using a proprietary font.

Consider The Downsides

Embedded fonts may seem like the answer to a Web designer's dreams, but some visitors might not agree. There are two significant issues you need to consider before including embedded fonts:

    * Download Time: You could lose visitors because now they have to wait for the font to download before the page displays. For example, some sample .eot files we downloaded had an average size of 20-25k. That can significantly affect your page download time.

      Minimize this problem by only embedding unusual or obscure fonts, not common fonts that users probably already have installed.

    * Security Warnings: Depending on their individual browser settings, visitors may receive a security warning every time a page accesses an embedded font. Besides being disruptive, the warnings may scare visitors away from your site.