Lovely browser fonts with CSS3 @font-face

Some of you might have noticed some rather nice fonts on the new Media Molecule website. Well, I suppose that might depend on whether or not you like them and if you’re using a half decent web browser.

Anyway, yes - those tasty fonts use CSS3’s @font-face rule. Not all browsers support it, but some additional file formats leave you with support in working in IE4+, Firefox 3.5+ Opera 10+, Safari 3.1+ and Chrome 4.0+. You upload the relevant licensed-for-web-use font files to your webserver, telling your web browser where to download the various files from. You can of course read our stylesheet, but for our title font, Museo (from Jos Buivenga’s exljbris Font Foundry) it looks a little something like this:

@font-face {
	font-family: 'Museo500';
	src: url('/images/assets/fonts/Museo500-Regular.eot');
	src: local('Museo 500'), local('Museo-500'), url('/images/assets/fonts/Museo500-Regular.woff') 	format('woff'), url('/images/assets/fonts/Museo500-Regular.otf') format('opentype'), url('/images/assets/fonts/Museo500-Regular.svg#Museo-500') format('svg');
}

So - .ttf and .otf font files for standards compliant browsers, and .eot files for Internet Explorer 4+, .woff files for Firefox 3.6+ and even an .svg format for iPhone (ain’t that kind!)

Anyway, chances are if you’re not using @font-face already, you soon will be - so at this point I’d recommend www.fontsquirrel.com - a great resource for 100% free for commercial use fonts, complete with a growing collection of “@font-face kits” and incredibly, a free @font-face generator that will let you convert license free fonts for use on the web.

If you’re looking for a wider range of fonts for use on the web, check out TypeKit and Clearleft’s upcoming Fontdeck.