Degrading Unicode characters for web browsers with missing fonts

Question

I am using the Unicode \'CHECK MARK\' (U+2713) in a html document. I find that it renders OK in most browsers, but occasionally I encounter someone with a missing font on their

Answer 1

There's not a direct way to tell if any particular character has rendered in a useful way. About all you can do from JavaScript is to create a containing one (or several) of the target character in the target font, and compare its width to another containing the same number of characters you know won't render usefully(*). If they're the same width, chances are you've got a load of boxes or question marks in each, so you can take backup measures like adding an image.

Since this is quite a lot of annoyance you may prefer to just go for the image. Or you could try using @font-face embedding on modern browsers to use a known-good font in general. Since it is typically IE that has poor Unicode font fallback support, be sure to include an EOT font.

(*: you could try a character that's currently unassigned and will hopefully stay that way, eg. U+08FF, or a guaranteed-invalid character like U+FFFF, though it's questionable whether you should be allowed to put that in an HTML document.)