How to use @font-face in CSS3?

I have already posted before about sIFR technology but now its time to use CSS3. No more requirement for SIFR.

Now in web technology CSS3 is a have many exciting new functions and features available.
And almost @font-face font comes with :

• TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
• EOT (OpenType) fonts for Internet Explorer 4+
• WOFF (Web Open Font Format) fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+

@font-face is able to download Font typography in client's browser from the server its "Web Embedding Fonts". and its extance will be EOT that means OpenType for Internet Explorer's embedded font support. All other browser support embedded font via "TTF" TrueType file format.

Here is the syntax to embedded font in CSS3

@font-face
{ 
   /*Give a tempeorary Name*/
    font-family: "MyFontName";

   /* Below line is for IE Only */ 
    src: url( /location_of_font_Folder/FontFileName.eot );

    /* Below line is for other browser (non-IE) */ 
    src: local("Correct Font Name in Real File"), url( /location_of_font_Folder/FontFileName.ttf ) format("truetype");
} 
/* Now we can us that Font name jsut linke any other font name */ 
.customTitle { font-family:"MyFontName", verdana, helvetica, sans-serif; }

And in HTML it will same as existing code…

<p class="customTitle">Welcome CSS3</p>

This is very easy think, just remember that you have to write down IE syntax first in @font-face style. and you need to convert TTF to EOT for IE support. here are some online tool which are doing this.

• http://www.fontsquirrel.com/fontface Download hundreds of EOT, WOFF fonts.
• TTF to EOT Font converter
• Web Embedding Fonts Tool (WEFT)

This is very easy to cool. isn’t it.