As you’ve already known, Firefox 3.5+ , Safari 3.1+, Opera 10+ and Internet Explorer 4.0+, all of them support @font-face embedding and Google’s Chrome 3.0 beta does as well. Although embedding the @font-face is easy by just few line code in CSS, create these font file for each type of web browser is not easy. Too many steps! Have you ever wished you had font-face kit that includes all of these files? Today, you’ll have it.

Although you are not going to download the @font-face kit for instant, you have out there a @font-face generator that is awesome. It’s easy to use, and easy to embed. This service is on Font Squirrel.

First, you have to choose the font you want to embed to your design. @font-face Generator (@FG) supports TTF or OTF format of fonts.

Go to @FG here and begin to generate your @font-face kit.

Usage is very simple, just fill out some option, upload the font and you are ready to go. However, because some of font copyright, Font Squirrel require you have to agree to their agreement.

@FG will generate for you the whole font-face kit that can be embedded to you design and supported by any web browser. The font files will be generated are:

• TTF or OTF. It depends on what type of font you uploaded
• EOT – This format is exclusive to Internet Explorer.
• SVG – This is an XML format supported by some browsers (iPhone inlcuded) but does not include hinting.
• WOFF – A new format of Mozilla that can be supported on FF 3.6+

Example I will upload my font to @FG with the font Chunkfive. After generation, this is the @font-face kit that I downloaded.

@FG includes the example file for you to check out and see how it works. The download comes with two stylesheets. The default one links all the necessary fonts in the directory and you will use this style sheet, as usually named as stylesheet.css that already embedded the font. All you need is just put the font into the font-family when you style the HTML elements. The second one base64 encodes the TrueType or OpenType font you uploaded and puts it right into the CSS itself. This font helps optimize the performance of your web page in browsers that can render the raw TTF or OTF fonts.

Is that cool? Check out now! From now on, you can use the @font-face easier and better. That would be great tool for typography users who want to embed some really awesome fonts to their designs.