Jim Moody Jim Moody - 5 months ago 10
HTML Question

How can I get these characters to display correctly in html?

I am using the Instagram API and below is an example of two characters I get back from IG that represent a user's name.


The characters are U+1F49B YELLOW HEART and U+1F33B SUNFLOWER. They are relatively new as coded characters (though somewhat older as emoji symbols implemented using other techniques), and few fonts contain them: Segoe UI Symbol, Segoe UI Emoji, Quivira, Symbola, and maybe some other, very new or specialized fonts. The Segoe UI fonts are available in new versions of Windows, possibly depending on the installation of updates (Microsoft nowadays delivers some fonts and extensions to fonts via Windows update mechanisms). The other two are free fonts that users may download and install, but they are probably not pre-installed in any computer.

Thus, if the user’s system lacks those fonts, the characters do not appear; instead, some indicator of an unrepresentable character is shown.

There is an additional problem. Although browsers are expected to scan through all the installed fonts to find a glyph for a character, they often fail to do this properly, especially for more or less exotic characters. Testing on Win 7 without any font settings in the test document, I observed that these characters are displayed by IE and Firefox, but not by Chrome. This issue can be fixed by specifying a list of fonts explicitly:

.emoji {
  font-family: Segoe UI Emoji, Segoe UI Symbol,
    Symbola, Quivira;
<span class=emoji>