title: Which font should I use for the newest Unicode characters?
body: <p><em>Note: They aren't new. Just "not supported", somehow.</em></p>
  
  <p>I'm trying to make simple controls for a element on my website, along the lines of a simple "mute" or "not mute" control.<br>
  However, I haven't been able to find any fonts capable of handling the newer Unicode symbols, such as the speaker symbols (<code>&amp;#x1F507</code> to <code>&amp;#x1F50A;</code>, or <code>&amp;#128263;</code> to <code>&amp;#128266;</code>) which are broken (&#x1F507; &#x1F508; &#x1F509; &#x1F50A;) even on Stack Overflow, yet still - <a href="http://www.unicode.org/charts/PDF/U1F300.pdf" rel="nofollow noreferrer">They can be found in the Unicode character listings</a> and are somehow able to be displayed in my PDF reader and Internet Explorer, but not Chrome.</p>
  
  <p>This is the first paragraph (above), from my perspective, with the characters broken:
  <img src="https://i.imgur.com/Rbqh5Z6.png" alt="Definitely not working."></p>
  
  <hr>
  
  <p>Anyway, here's my snippit of the code. (The video controls are in plain view for testing purposes). The actual element has a <code>z-index: -1000</code> attached to it; used as a video background.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function mute() {
    document.getElementById("jsControl").setAttribute ("href", "javascript:unmute()");
    document.getElementById("jsControl").innerHTML = "&amp;#x1F508;";
    document.getElementById("videoPlayer").volume = 0.0
    };
  
  function unmute() {
    document.getElementById("jsControl").setAttribute ("href", "javascript:mute()");
    document.getElementById("jsControl").innerHTML = "&amp;#x1F50A;";
    document.getElementById("videoPlayer").volume = 1.0
    };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
      &lt;style&gt;
          body {
              font-family: [Insert font names and attempts];
          }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;video id="videoPlayer" src="..."&gt;&lt;/video&gt;
      &lt;a id="jsControl" href="javascript:unmute()"&gt;&amp;#x1F508;&lt;/a&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've tried different web-safe fonts, such as Arial, Times New Roman and Tahoma and Sergoe UI.</p>
  
  <hr>
  
  <p><strong>Question:</strong> Is there any font that can be used that supports those unicode characters that <strong>works</strong> on Chrome?<br>
  (Even a font that has these remapped onto regular letters like Wingdings will be accepted as they can be attached using <code>@font-face { ... }</code>.)</p>
  
  <p>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.</p>
  
  <p><strong>Update:</strong> Viewing the icons in Internet Explorer works fine. Seems to be a chrome-and/or-other-browser sort of issue.</p>