Custom fonts across web browsers using CSS3

When I started learning web design, one of the most frustrating things to get used to was the inability to use fonts of my choice. Thanks to the limited set of fonts that actually work across all platforms, web designers have been restricted to a minuscule set of typefaces to build their designs around. There have always been the alternatives – plain old image replacement, sifr, cufon, among others – but none really seamless enough to drive mass adoption.

CSS 3 should solve that problem though. With most modern browsers beginning to adopt CSS 3 properties, using custom fonts is easier than ever now. Here’s a quick tutorial I recently recorded that explains how one can use pretty much any free font (I believe fonts have to licensed for use in the public domain to be of use here) and make your web pages work in any browser. This is guaranteed to work in Firefox 3.5, Safari 4, Chrome 3, Opera 10 and Internet Explorer 4 and above. Yep, you read that right. IE4 and above! Check out the video to see how…