From a CSS perspective: you don't absolutely need the span, you could use a large negative text-indent instead of the display:none, to do the image replacement.
Replacing text with image based text isn't the friendliest thing to do to those who need to increase font size in order to be able to read it (I've seen 21" monitors with just one word on it at a time used by a colleague ...)
font availability can to some extend be caught by allowing giving a long list of fonts in the font-family, sure it won't look the same everywhere, but you won't full and complete control anyway.
From a SEO perspective: As long as the replaced images say the same as the text that is replaced, a manual review should not land you in trouble.
But I've seen a few instances where e.g. googlebot fetched my CSS ... But I think that's better suited for the SEO folks to look at in all honesty.
