Use Noto Emoji font instead of markdown-it-emoji and twemoji

[mil-ad]

Is there a way to disable markdown-it-emoji and twemoji and instead use Google's Noto Color Emoji font?

I can add a new class like below but I want to use Noto everywhere without having to use classes.

.custom_emoji {
  font-family: "Noto Color Emoji"
}

I actually thought markdown-it-emoji plugin only deals with converting :smile: syntax into emojis but I type mine as direct unicode. So I'm not even sure how they're not picked up by my global font-family config anyway.

[yhatt]

Marp Core tries to convert any Unicode emoji characters to Twemoji, including a raw emoji character 😄 and :smile: shorthand. Early Chrome had been less reliable in PDF emoji rendering¹, so we had to adopt aggressive conversion into a unified SVG representation of emoji.

We have allowed to disable aggressive emoji conversion to Twemoji by setting the constructor option emoji.
https://github.com/marp-team/marp-core#emoji-object

const marp = new Marp({
  emoji: {
    shortcode: true, // Turn `:smile:` syntax into Unicode emoji instead of Twemoji
    unicode: false, // Disable agressive converting to Twemoji in Unicode emoji
  }
})

If you are using Marp CLI, Marp Core constructor option can set via the options setting in the configuration file. (Marp for VS Code cannot fine-tune the core constructor option)

# .marprc.yml
options:
  emoji:
    shortcode: true
    unicode: false

marp -c .marprc.yml your-markdown.md

In Markdown, tweak the style for preferring the emoji font than other fonts specified by the theme.[^2]

@import url(https://fonts.googleapis.com/css2?family=Noto+Color+Emoji);

/* for default theme */
section {
  font-family: "Noto Color Emoji",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
}

/* for gaia theme */
section {
  font-family: "Noto Color Emoji", Lato, 'Avenir Next', Avenir, 'Trebuchet MS', 'Segoe UI', sans-serif;
}

/* for uncover theme */
section {
  font-family: "Noto Color Emoji", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

Original definition of font-family is here

• default: https://github.com/sindresorhus/github-markdown-css/blob/9719250aca854ff73070da6c64a579b610773cb3/github-markdown.css#L103 from github-markdown-css package
• gaia: https://github.com/marp-team/marp-core/blob/abc4e2edfae297ba16525270205dcdba161d38f9/themes/gaia.scss#L197-L198
• uncover: https://github.com/marp-team/marp-core/blob/abc4e2edfae297ba16525270205dcdba161d38f9/themes/uncover.scss#L31-L32

And now, you can use Noto Color Emoji in anywhere. 😄

Footnotes

1. Emoji's not exported to PDF yhatt/marp#57, Printable unicode emoji marpit#18, Remove Unicode Emoji support marpit#53, Aggressive emoji support with twemoji marp-core#19 ↩

[mil-ad]

Fantastic! Thank you!!

[remino]

Just hit the same problem and this solution works. Thank you! I only want to point out, for anyone else encountering this and wanting to use the Noto emoji, to add the Noto Color Emoji font as the last in the list of font-family. Otherwise, the emoji font will override the number characters with emoji as well.