All geek questions in one place

How to use emoji font on website?

I downloaded the Google font "Noto Color Emoji" , but cannot make it work. I have no problem with fonts like "Noto Sans Regular". But with the font "Noto Color Emoji" 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 also does not work 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 differently?

+5
source share
2 answers

Color fonts are completely new with several competing standards that are still being developed and implemented in shared text libraries (Opentype 1.8 has just been released with a different color twist).

They are unlikely to work today, except for the latest preview browsers, and even then the level of support is likely to change and depends on the underlying system, since browsers use system text libraries (with different levels of overriding).

Older software just doesn't recognize the Opentype extensions added to make these fonts possible.

Finally, Noto Color Emoji is pretty much a prototype, most likely, earlier versions do not quite match what was standardized later, and even so, how color font standards are used will continue to evolve, as font makers and font consumers are maturing in this regard.

+4
source

Colored fonts are coming, but you need to either:

  • Implement all color formats in one font (4 in total!) → I don’t know if anyone did this, but the font would be huge and it looks really complex and not recommended.
  • Make one font for each format and download it conditionally. → Not recommended, as some formats are based on bitmap images, and not vectors and fonts can be huge (+ 20Mo).
  • Wait for support for SVT OpenType format on all platforms.
  • Do it in javascript like
    • Twemoji "A simple library that provides standard Unicode emoji support on all platforms."
    • EmojiOne "EmojiOne ™ is open the emoji standard."

The latter solution looks best for use on the Internet!

+1
source

Source: https://habr.com/ru/post/1257737/

More articles:


All Articles