title: How to use an emoji font on a website?
body: <p>I've downloaded <a href="http://google.com/get/noto/#emoji-zsye-color" rel="noreferrer">Google's "Noto Color Emoji"</a> font, but can't get it to work. I have no problems with fonts like "Noto Sans Regular". But with the "Noto Color Emoji" font I get the following errors in Firefox (on Windows 10):</p>
  
  <pre><code>downloadable font: no supported glyph shapes table(s) present (font-family: "NotoColorEmoji" style:normal weight:normal stretch:normal src index:0)
  downloadable font: rejected by sanitizer (font-family: "NotoColorEmoji" style:normal weight:normal stretch:normal src index:0)
  </code></pre>
  
  <p>It's also not working with Chrome, Internet Explorer and Edge on Windows 10 or Firefox on Ubuntu Linux.</p>
  
  <p>This is my code:
  </p>
  
  <pre><code>&lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
      &lt;style type="text/css"&gt;
          @font-face {
              font-family: 'NotoColorEmoji';
              src: url('NotoColorEmoji.ttf') format('truetype');
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;span style="font-family: 'NotoColorEmoji'"&gt;Emojis: &lt;/span&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>What am I doing wrong? Are Emoji fonts used in a different way?</p>