Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use an emoji font on a website?

I've downloaded Google's "Noto Color Emoji" 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):

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)

It's also not working with Chrome, Internet Explorer and Edge on Windows 10 or Firefox on Ubuntu Linux.

This is my code:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        @font-face {
            font-family: 'NotoColorEmoji';
            src: url('NotoColorEmoji.ttf') format('truetype');
        }
    </style>
</head>

<body>
    <span style="font-family: 'NotoColorEmoji'">Emojis: 😀😬😁😂😃😄😅😆😇😉😊🙂</span>
</body>

What am I doing wrong? Are Emoji fonts used in a different way?

like image 286
John Avatar asked Oct 05 '16 13:10

John


1 Answers

I use font-family:'Segoe UI Emoji' Works on Chrome, Firefox, IE11, Mac Safari, and mobile Safari. Mostly all emojis work, including ones that don't have any colors on normal fonts, such as the mountain, speech bubble, paintbrush.

Does not work on Android :(

like image 112
Curtis Avatar answered Sep 19 '22 08:09

Curtis