cssjsfiddlegoogle-font-apigoogle-fonts

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

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.

Solution

  • 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+.