@font-face – The Complete Solution?

Embedding fonts for use in websites with cross-browser compatibility is now very much possible – but it’s still a bit complicated.

These two resources greatly help to make the solution bulletproof and painless:

Bulletproof @font-face syntax « Paul Irish

The best syntax solution explained
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ [new window]

Paul is also a founder of the very interesting “HTML5 Boilerplate – A rock-solid default for HTML5 awesome.[new window] – a startup kit for developing HTML5 and cross-browser compatible websites.

Font Squirrel | Create Your Own @font-face Kits

An @font-face generator that converts your fonts and gives you the CSS ready to go!
http://www.fontsquirrel.com/fontface/generator [new window]

Font squirrel also provide hundreds of fonts free for commercial use, and @font-face kits ready to go for any website. 


Here’s a handy little presentation on the subject, and includes some tips on minimising the dreaded fout. It’s actually quite old, but from what I know it’s all still very relevant.



Hmm. Not sure where that presentation has gone. Oh well. Some more useful tips can be found in this blog post: Disasterman’s <pre>posterous – @font-face pitfalls and answers