@font-face is a new way of embedding custom fonts on your site, but why would you use it? and how?

what is @font-face?

@font-face is a new way of embedding custom fonts on your site, to my opinion it’s much better to use and implement then cufon or sifr. what makes it so great is that it is supported by most of the major browser (at least the latest version of each browsers). it’s not running on javascript so it works perfectly with javascript turned off.

Why use it?

• it’s easy to implement and use
• it does not depend on javascript
• it is supported by the major browsers

How to use it?

• Download a font face kit on your computer
• Extract the downloaded zip
• Include your fonts in your webproject
• Add the font-face css code at the top of your stylesheet (make sure to set the paths to your fonts correctly)
• Add the font-family attribute with the new font as value

ute to your css style with the custom font as value (and other fonts as fallback)

…. and that’s it! … really? … yes thats really all you need to do pretty cool, isn’t it?

Fontsquirrel

not convinced yet? why don’t you have a look at fontsquirrel, they have ready to use @font-face kits that you can download. Even better, if you have a TTF font (and made sure you are allowed to embed that font) you can the use their @font-face kit generator wich will generate the css code for you and convert your font to the other required formats for browser compatibility.

Conclussion

a simple, easy way to embed fonts with little effort and no headaches.