How to use an emoji font on a website?

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.

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

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

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

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

 

Note: Currently supports Firefox and Illustrator.

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!