Which font should I use for the newest Unicode characters?

Question

Note: They aren't new. Just "not supported", somehow.

I'm trying to make simple controls for a element on my website, along the lines of a simple "mute" or "not mute" control.
However, I haven't been able to find any fonts capable of handling the newer Unicode symbols, such as the speaker symbols (&#x1F507 to 🔊, or 🔇 to 🔊) which are broken (🔇 🔈 🔉 🔊) even on Stack Overflow, yet still - They can be found in the Unicode character listings and are somehow able to be displayed in my PDF reader and Internet Explorer, but not Chrome.

This is the first paragraph (above), from my perspective, with the characters broken: Definitely not working.

Anyway, here's my snippit of the code. (The video controls are in plain view for testing purposes). The actual element has a z-index: -1000 attached to it; used as a video background.

function mute() {
  document.getElementById("jsControl").setAttribute ("href", "javascript:unmute()");
  document.getElementById("jsControl").innerHTML = "&#x1F508;";
  document.getElementById("videoPlayer").volume = 0.0
  };

function unmute() {
  document.getElementById("jsControl").setAttribute ("href", "javascript:mute()");
  document.getElementById("jsControl").innerHTML = "&#x1F50A;";
  document.getElementById("videoPlayer").volume = 1.0
  };

<html>
  <head>
    <style>
        body {
            font-family: [Insert font names and attempts];
        }
    </style>
  </head>
  <body>
    <video id="videoPlayer" src="..."></video>
    <a id="jsControl" href="javascript:unmute()">&#x1F508;</a>
  </body>
</html>

I've tried different web-safe fonts, such as Arial, Times New Roman and Tahoma and Sergoe UI.

Question: Is there any font that can be used that supports those unicode characters that works on Chrome?
(Even a font that has these remapped onto regular letters like Wingdings will be accepted as they can be attached using @font-face { ... }.)

Also, please don't complain about the broken Javascript (if it is not written correctly) - I can fix that myself. It's the font; text (missing symbols) that I'm worried about.

Update: Viewing the icons in Internet Explorer works fine. Seems to be a chrome-and/or-other-browser sort of issue.

score 2 · Accepted Answer · answered Jan 27 '15 at 12:14

Since you would use just a few symbols in a special context, rather than as text characters, the practical choice is to use images.

However, if you really want to use characters, there is a very limited set of fonts to consider. According to fileformat.info, U+1F507 is supported only by Quivira, Symbola, Segoe UI Symbol, and Segoe UI Emoji. The latter two are proprietary fonts, available only in relative new versions of Windows, and as different variants (e.g., my Windows 7 lacks Segoe UI Emoji and has a variant of Segoe UI Symbol that lacks the character).

Thus, the only way that works reasonably is to use either Quivira or Symbola as a downloadable font, via @font-face. As they are rather large fonts, and you would need to serve them in different font formats for cross-browser functionality, this approach is hardly a practical option (unless you have many other special characters, possibly used in text, that also need such special fonts).

score 1 · Answer 2 · answered Jan 27 '15 at 10:12

1

You shouldn't assume the person viewing your site has necessary fonts installed. Instead, you should add an external font. Find a font that has an appropriate licence and contains the required symbols (for example http://emojisymbols.com/), and add it to CSS as with @font-face declaration:

/*
EmojiSymbols Font (c)blockworks - Kenichi Kaneko
http://emojisymbols.com/
*/
@font-face {
    font-family: "EmojiSymbols";
    src: url('EmojiSymbols-Regular.woff') format('woff');
    text-decoration: none;
    font-style: normal;
}
.controlIcon {
    font-family: "EmojiSymbols";
}

answered Jan 27 '15 at 10:12

Karol S

9,028
2
32
45

This is essentially a workaround for Chrome's patchy support of Emoji . Support on Mac OS X is expected with Chrome 41 on February 2015, nothing is known about Windows. This should be addressed with a polyfill eg like [this one ](https://gist.github.com/josh/0661f198c62d872e0d3a) – Panagiotis Kanavos Jan 27 '15 at 11:33
The font is distributed in .woff format only, and conversions seem to be forbidden. Moreover, it does not seem to contain any of the characters mentioned in the question. – Jukka K. Korpela Jan 27 '15 at 11:53
@JukkaK.Korpela It does contain those characters, I checked. But of course it was only a suggestion, there are other fonts out there. – Karol S Jan 27 '15 at 22:11
@KarolS, I actually tested what happens when trying to render those characters in that font, and it fails. I also checked with a font inspector that the last character, by Unicode number, in that font is U+3299. – Jukka K. Korpela Jan 27 '15 at 23:13
I knew it was `@font-face`. I just entered it wrongly. – Timothy Jan 28 '15 at 02:53

Which font should I use for the newest Unicode characters?

2 Answers2

Linked