How to use Google Noto Color Emoji front from CDN via CSS

Question

I there any way to use Google's color emoji font from CDN? I was trying to use it in a jsfiddle but couldn't figure out how.

Answer 1

You can use it like this:

@font-face {
  font-family: 'Noto Color Emoji';
  src: url(https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf);
}

UPDATE

You can also give "Noto Colr Emoji Glyf" a try, which is COLRv1 font: https://fonts.googleapis.com/css2?family=Noto+Colr+Emoji+Glyf

See repo and demo.

But make sure to check browser support, as of writing it's only supported in Chrome 98+.