10

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.

Mladen Mihajlovic
  • 6,095
  • 7
  • 40
  • 55

2 Answers2

11

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

Maxim Mazurok
  • 3,856
  • 2
  • 22
  • 37
  • 1
    Hey wow I didn't really notice this when you wrote it. Works great thanks! Here's a little fiddle to play with it: https://jsfiddle.net/dbtazwhv/ – Mladen Mihajlovic Oct 10 '20 at 07:48
  • 6
    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 "Noto Color Emoji". Rather, you can add "Noto Color 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. – Venryx Oct 11 '20 at 02:14
  • 1
    Thank you, guys ❤ Indeed, @Venryx suggested a good approach for using emoji fonts. – Maxim Mazurok Oct 11 '20 at 08:30
  • 1
    Link no longer working, you can use this url instead : `https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf` – Arnooo Jan 12 '22 at 11:11
  • thanks, @AryqsIpsum, I've update the answer – Maxim Mazurok Jan 13 '22 at 00:37
  • Found another one: `https://fonts.googleapis.com/css2?family=Noto+Color+Emoji` – Saber Hayati May 12 '22 at 23:48
  • Note that you can also use ``. Even though it's not COLRv1, it can display more emojis such as (identification card). It appears Noto Colr Emoji Glyf is still in active development and there are still missing emojis, so I wouldn't use it in production. As of today, Noto Colr Emoji Glyf fonts are almost the exact same size as Noto Color Emoji fonts, so maybe it's still mostly bitmaps. – thdoan Jul 07 '22 at 23:25
0

This is NOT google but you can try this alternative,

EmojiOne

Here is the CDN

https://cdnjs.com/libraries/emojione

AshhaR
  • 21
  • 7