Working With CSS3′s @font-face

Lately i’ve been working on WPNest newest theme which is used custom fonts. I used to use cufon to handle this. However, It has some limitations and the buzz & advantages of CSS3 & @font-face are just too cool to be ignored. Long story short, i’m using CSS3′s @font-face in the development of this latest theme of WPNest. I learned some things during the development, though:

1. @font-face can be cross-browser compatible (even to IE6) if you write it right. It was awesome. For more information you should read Paul Irish’ blogpost about it here.According to Irish’s post, this is how @font-face syntax should be written to achieve its best result on variety of browsers:

   @font-face {
       font-family:'Graublau Web';
       src:url('GraublauWeb.eot?') format('eot'),url('GraublauWeb.woff') format('woff'),url('GraublauWeb.ttf') format('truetype');
       }

2. To apply Paul Irish’s bulletproof @font-face syntax, you need at least three types of font: .ttf, .woff and .eot. If you only have one type of font you’d like to use, that’s not the end of the world. Use fontsquirrel’s @font-face generator instead.
3. Google webfonts rocks. You may safe amount of bandwith by using this service. BTW, it has a very cool font previewer.

Any more thought on using @font-face? Feel free to share