Using Unicode standard symbols in HTML/CSS documents. Do I use Javascript?

Question

I'm an enormous newbie but I want to add a Unicode character to a document. I've tried reading all the Unicode character threads but I am finding it difficult to understand and I am getting a headache trying to soak in all the information.

<doctype html>
<html>
  <head>
    <meta name="description" content="description" />
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <meta name="keywords" content="keywords" />
    <title>title</title>
    <link rel="stylesheet" href="stylesheet.css" type="text/css" />
  </head>
  <body>
    <div id="idtag">
      &#x1F4D7;
    </div>
  </body>
</html>

#idtag {
  font-family: Tahoma, Helvetica, "Arial Unicode MS", sans-serif;
}

I am trying to add U+1F4D7 or anything like a book but when I view the page I just see a hollowed out square. I don't think I have the symbol on my PC. I have used Google Fonts before and they just require Javascript? Would I do the same? How would I do this?

score 2 · Answer 1 · answered Jul 14 '12 at 16:36

The problem with &#x1F4D7 is that it's outside the classic BMP range -- not sure whether there are any fonts at all that have these characters, but they are definitely not common.

Just because a character is defined by Unicode doesn't mean that every font has to have it. Even characters in BMP (the codepoints between 0 and 65535) are not available in all fonts.

There is no way to display a character that's not available in the font that's being used. Unicode test pages that show you what a character "should" look like will send you images :-)

score 1 · Answer 2 · answered Jul 14 '12 at 17:08

The "GREEN BOOK" character you are trying to use seems to be one of the emoji new in Unicode 6. It is therefore not included in the font-families you are using for display, not even in the very large Arial Unicode MS.

On newer versions of OSX and iOS it is supported through the Apple Color Emoji font. Otherwise I don't know of any fonts that support this character. I guess there are some in Japan but almost certainly none on Google Webfonts.

Google Webfonts therefore won't help you in this case.

But if it's just about showing a book icon, I'd use an image. E.g. from the noun project.

If you need it as a font, you could use Fontello or Pictos Server to generate a font from a selected icon.

For more about using fonts for icons, there was a nice article on CSS-Tricks a few monts ago.

score 1 · Answer 3 · edited May 23 '17 at 12:31

You document is correct in principle, except for the typo on the first line (should be <!doctype html>, with the exclamation mark), and the character is rendered OK on my Firefox. But this happens because Firefox is clever enough to scan the fonts installed on my computer to find a glyph for the character, and I happen to have installed the Symbola font that contains it. IE 9 is not that clever, but even it shows the character if I add Symbola to the font-family list.

So this is a font problem, and a big one. You cannot expect Symbola to be installed (probably less than 1 user out of 10,000 has installed it, regrettably), and it appears to be about the only published free font containing U+1F4D7. The page you refer to has a link to a font support page that says this. It might not be completely up-to-date, but it gives a good picture of font support.

You might consider using a web font for the purpose, but this sounds somewhat disproportionate for displaying just one character, and it seems that the Font Squirrel @font-face generator fails to work with Symbola, for some reason.

See also: Guide to using special characters in HTML.

P.S. The character would appear black and white, though you could use CSS to set a color on it. Cf. to the SO question Color in the Unicode standard?

Using Unicode standard symbols in HTML/CSS documents. Do I use Javascript?

3 Answers3