All work and no play makes Jack a dull boy.This is an on-site @font-face implementation, created at fontsquirrel.com:
All work and no play makes Jack a dull boy.This is the DataURI implementation:
All work and no play makes Jack a dull boy.
For more info on FOUT (Flash of Unstyled Text) check this post by Paul Irish.
Basically, in certain browsers (most notably IE9 and FF3.6) the text will briefly flash as the backup typeface while the custom font is loading. Other browsers will show nothing; the text while be transparent until the file has loaded. This solution uses a dataURI to inject the font file immediately, preventing the FOUT.
One note: since dataURIs are touchy in IE 8 and under, those are just served EOTs via conditional comments. Everything else gets the dataURI via a CSS file with a modern media query. Check the source to see that.
Since we're adding this in the HEAD, it can slow down the progression to the ready states if the CSS isn't already cached. Server-side compression may help, but I haven't tested that thoroughly yet.