How to use Unicode symbols on webpages? - unicode

Question

I'm using some Unicode symbols on a webpage I'm making. For purposes of this example, let's say it's this guy: '☺'.
As I understand it, under the correct implementation of CSS, you can set any font you want, and if it runs into a character that is not present in that font, it will start falling back through the font-family backup choices until it finds one that works.
In light of that, I have my font-family set up like this in css:
font-family: Tahoma, Helvetica, "Arial Unicode MS", sans-serif
My rationale is that Tahoma comes bundled with Windows. However, I found out online that only some versions of Windows' bundled Tahoma had Unicode support. Helvetica is a font that is similar to Tahoma for Macs. "Arial Unicode MS" comes bundled with Office 2000 and up and definitely support Unicode. San-serif is the fallback in all cases that should also hopefully support Unicode.
For the most part, this works well. However, as it is wont to do, Internet Explorer seems to be ruining my well-laid plan. I can't figure out what the pattern is, as I'm seeing it on one computer running Vista with IE8, and another on Windows XP with IE7, but it works fine on my development machine with Win7 with IE8/IE7 Tester/IE6 Tester. I have found the claim on some obscure webpages that on old versions of IE, it will only look for the first font that it has, and then use that for everything, even if that font is missing a given symbol, but this doesn't explain why it's happening on Vista/IE8. Thus, my lovely Unicode symbols turn up as boxes to some, but not all IE users.
What's the recommended way to be handling Unicode symbols on the web? Are they just not usable for projects where wide browser compatibility is needed? Should I be looking to include code specifically to handle old IE? Are there any other gotcha situations or platforms I should be worrying about?
Edit: Updated with new information on systems this is failing on.

Answer 1

only some versions of Windows' bundled Tahoma had Unicode support
It's not really “Unicode support”. Tahoma supports Unicode in as much as it has Unicode code point lookup tables. That doesn't mean you get a glyph for every character defined by Unicode... actually almost no font has glyphs for every character.
No version of Tahoma includes a glyph for U+263A White Smiling Face, so your code is a test of font fallback capabilities, something IE (especially IE6) is bad at, compared to other browsers. A more common Windows-bundled font that does include U+26A3 is plain Arial (not “Arial Unicode”), since version 3.00 (included in WinXP).

Answer 2

You can use IE overrides in your CSS file to create different behavior for older versions of internet explorer. The over-rides are # and _ before each statement depending on the version of internet explorer.
Put an _ before each statement in your css for internet explorer 6.0 and earlier
Put a # before each statement in your css for internet explorer only
Example:
//Normal
font-family: Tahoma, Helvetica, "Arial Unicode MS", sans-serif;
// IE 6.0 Earlier
_font-family: Tahoma, Helvetica, sans-serif;
// IE Only
#font-family: Tahoma, Helvetica, "Arial Unicode MS", sans-serif;

Answer 3

As I understand it, under the correct implementation of CSS, you can set any font you want, and if it runs into a character that is not present in that font, it will start falling back through the font-family backup choices until it finds one that works.
Unfortunately, that's not how it works in Internet Explorer, at least not in older versions. These browsers only use the first font family available on a system. One approach I sometimes use is to add a separate CSS class for Unicode characters:
<span class="unicode">[Unicode character]</span>
.unicode { font-family: "Lucida Sans Unicode", ..., sans-serif; }
I found Lucida Sans Unicode to be a good choice as it's preinstalled on all Windows versions since Windows 98. Its Unicode support isn't as complete as you'd expect, though.
But I started to prefer icon fonts. They have the advantage that the glyphs always look the same regardless of the font actually used. As John Slegers mentions in his answer, there are great online tools to create your own customized icon font.