How do I use @font-face with the Noto Emoji font by character references?

I have two local files

index.html
NotoEmoji-Regular.ttf

I have downloaded NotoEmoji-Regular.ttf from google.com/get/noto/.

The index.html contains this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Emoji</title>
    <style>
        @font-face {
            font-family: "Noto Emoji Regular";
            src: url("NotoEmoji-Regular.ttf");
        }
        span {
            font-family: "Noto Emoji Regular";
        }
    </style>
</head>
<body>
    Emoji: <span>&#x1F595;</span>
</body>
</html>

When I open the index.html in my browser, it does not display the text in the span in Emoji. Using Chrome DevTools (F12 in Chrome) it says the span does have the correct Noto Emoji Regular font.

How do I display an Emoji icon from this font?

Solution

1- Make sure your directory is correct.

2- You should add format of font src:

@font-face {
 font-family: "Noto Emoji Regular";
 src: url('NotoEmoji-Regular.ttf')  format('truetype');
}

3- &#x1F595; is not correct with Noto Emoji font. Try with: ℹ (ℹ)

For cross browsers, you have to convert to web fonts, example:

@font-face {
 font-family: 'Noto Emoji Regular';
 src: url('NotoEmoji-Regular.eot'); /* IE9 Compat Modes */
 src: url('NotoEmoji-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('NotoEmoji-Regular.woff2') format('woff2'), /* Super Modern Browsers */
   url('NotoEmoji-Regular.woff') format('woff'), /* Pretty Modern Browsers */
   url('NotoEmoji-Regular.ttf')  format('truetype'), /* Chrome, Safari, Android, iOS */
   url('NotoEmoji-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}