Why? CSS wasn't made for this. We have SVG for graphics like this. This is a demo, yes, and it's great to demonstrate the capabilities of CSS for making small graphics, but in practicality, I don't see the point. The key problem is graceful degrading- there simply is none here.
Regardless, I love seeing things like this, and he's done a good job. Good work.
I presume Dustin's audience is very "niche". They were responsible, if you will for the conversion results in his article, and after the article are annoyed by it.
Edit: Oh, you meant some unsemantic font.
It's a really nice upgrade, because in the current version of Firebug and older versions of the Chrome inspector it was not possible to modify or even see these properties.
Also, how do you fall back for older browsers that do not support Canvas or SVG?
Even with CSS Sprites, there are two requests - one for the CSS, another for the sprite image file.
The main advantage of CSS is that you can change the color and appearance of components without using a graphics package, and they might scale better. But that's about it.
It was a technical exercise rather than a proof of concept. The icons themselves are very simple and limited. I wouldn't recommend using CSS in this way for production work (other than perhaps for very simple arrows).
This has the added benefit of screen reader support.
edit: I'm not sure why I can't reply to you below, but here are some of the unicode arrows:
It's easy enough to get screen readers to ignore it, if it is truly presentational.
But there doesn't seem to be one for the simplest: just a basic triangle.
It's a nice theoretical challenge, and may provide some benefits if you are building (mobile) device specific systems, but as a broad technique there is little production value at the moment.
OTOH, I don't know that there is any way to take these icons and draw them at a larger size without creating new CSS.