@font-face

By Bill Seremetis, 6 June, 2011

I've been working with a photographer lately... again! Many of my clients are photographers so this wasn't a surprise for me.
Photographers have a special way of observing things, especially when it comes to design! So he naturally asked about using his favorite fonts on his brand-new site. You guessed it, he wasn't talking about web-fonts.

There is a way to do it and it is available since IE4 (September 1997). Of course this method has evolved over the years and lately all major browsers allow you to add your custom fonts through CSS.
As you can imagine, major browsers all have their own implementation of using custom fonts. The good thing is that they all use the @font-face command (forget -moz, -webkit, -o etc). The bad thing is that you would prefer having prefixes...

Every browser supports his own font type. In order to have your page displayed correctly among all major browsers you need:
TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOT fonts for Internet Explorer 4+
WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG fonts for iPad and iPhone

It doesn't look so good huh? Well, there is fontsquirrel that has many fonts available for free for commercial use. Inside fontsquirrel there is a section called @font-face kits. There you can find kits that have all the above font types for download and the accompanying CSS in order to paste it in your site and be ready in no time!