How to use an emoji font on a website?
<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>