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?
Answer
Color fonts are quite new with several competing standards which are still evolving and being implemented in common text libs (Opentype 1.8 has just been released with another color twist).
They are unlikely to work today except in the very latest preview browsers, and even then the level of support is likely to vary and depend on the underlying system, since browsers do use the system text libs (with various levels of overrides).
Older software will just not recognize the Opentype extensions added to make those fonts possible.
Lastly, Noto Color Emoji is pretty much a prototype, it is likely early versions are not quite conformant to what has been standardised later, and even if they are, the way the color font standards are used is still likely to evolve as font producers and font consumers gain maturity on the subject.