How to use an emoji font on a website?

J

4

19

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?

Jodeejodhpur answered 5/10, 2016 at 13:28 Comment(4)

Where exactly did you get the font from? Are you sure it's suitable for the web? – Myrlmyrle 5/10, 2016 at 13:35

You have issue only with firefox? win, mac? – Brainpan 5/10, 2016 at 13:44

github.com/googlei18n/noto-emoji/issues/43 – Frisch 5/10, 2016 at 13:59

I got it from here: google.com/get/noto/#emoji-zsye-color I tried it with Firefox, Chrome, Internet Explorer and Edge on Windows 10. I also tried it with Firefox on Ubuntu Linux. I don't think the OS should be the problem, because I'm not trying to install the font. – Jodeejodhpur 5/10, 2016 at 14:36

F

6

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.

Fountainhead answered 7/10, 2016 at 13:12 Comment(1)

Noto Color Emoji still appears to have spotty support. Works for me in chrome but not firefox. – Cenotaph 28/8, 2018 at 12:43

P

8

Color fonts are coming but you will need to either:

Implement all color formats in one font (4 in total!) -> I don't know if somebody did it but the font would be huge, and it looks really complicated and not recommended.
Make one font for each format and load it conditionally. -> Not recommended as some formats are bitmap based and not vectors & fonts can be huge (+20Mo).
Wait for the OpenType SVG format support on all platforms.
Do it in javascript like
- Twemoji "A simple library that provides standard Unicode emoji support across all platforms."
- EmojiOne "EmojiOne™ is the open emoji standard."

The latest solution looks the best one for now for a web usage!

Pontic answered 30/11, 2016 at 18:56 Comment(2)

EmojiOne is not free for commercial applications. – Easily 3/8, 2017 at 7:5

License update as of 2020-07-28: EmojiOne has rebranded to JoyPixels. PNG 32px, 64px, and 128px as well as 32px and 64px sprites are available for digital use, with attribution. See joypixels.com/licenses/free for more information on usage and attribution requirements. – Cahn 28/7, 2020 at 12:0

H

7

We are currently working on an open source Emoji library called OpenMoji.

At the moment, we got an .ttf font working which you can simply embed in your website

Download the font from here. 💾
Embed the font with:

@font-face {
  font-family: 'OpenMoji';
  src: URL('OpenMoji-Color.SVG.ttf') format('truetype');
}

Enjoy! 🥳 If there's any question, please let us know.

Note: Currently supports Firefox and Illustrator.

Hoarsen answered 3/5, 2021 at 9:20 Comment(0)

F

6

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.

Fountainhead answered 7/10, 2016 at 13:12 Comment(1)

Noto Color Emoji still appears to have spotty support. Works for me in chrome but not firefox. – Cenotaph 28/8, 2018 at 12:43

P

1

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 :(

Ptolemaic answered 12/9, 2019 at 3:30 Comment(2)

Note that 'Segoe UI Emoji' is the ugliest font in existing out of the common emoji fonts today. also it doesn't support country flags and some other characters. – Cahn 28/7, 2020 at 12:10

It's important to note that you don't need to replace your existing font in order to use the colored emojis from fonts like "Segoe UI Emoji". Rather, you can add "Segoe UI Emoji" at the end of your font-family style-value, such that it provides colored emojis (over the browser non-colored fallback), but lets your regular font (listed at start) do the lifting for regular characters. – Palmirapalmistry 11/10, 2020 at 2:12

Recommended topics

Hot tags