Get some preliminary idea about web fonts

This tutorial may seem to be little complex, as I found it in some site and I have just posted it here as it is. But later I have written more easy contemporary guide on web fonts to use it in your website.

It may be your requirement : I have a beautiful font and I want to use this font in my website. I want to make sure that everyone can see this font using any operating system or browser. What shall I do for it. What is the CSS code to use a font in my webserver. The first step I have made that I have uploaded the font file in my website (running in a web server) using FTP method. Then what CSS code I shall use to use this font?


About the Author : Mr Bikram Choudhury is the compiler of this article. Professionally he is the technical adviser of RiG SEO Service providing website optimization service. Also he is a PHP Programmer and Web Designer himself and provides consultancy for lots of websites. You can contact him for Guest Posting also.


Question : I want to change my fonts on my site to a font I downloaded but to make sure that everyone see what it should be. How can I add my font file to my website and get the CSS to load it ?

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.”

Do some research : some designers don’t allow their fonts to be embedded. TrueType fonts have embedding permissions encoded within them.

2. Create An Embedded Font File

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:



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.

Related Post : http://www.alistapart.com/articles/cssatten