How to use iemoji on edge

Solution 1:

Sadly, Windows comes without system Emoji font containing colourful flag ligatures ~~(and many more glyphs from Emoji land)~~. Since Chrome and Edge rely on system fonts, we see those simple characters and not the ligature.

Firefox (still) embeds its own nice fallback Emoji font based on Twitters ("Twemoji Mozilla") to mitigate this. So the only way to get it working across browsers is to provide webfont.

There is nicely usable Mozilla's Twemoji font compiled for web usage by Maxime Euziere at https://xem.github.io/unicode13/emoji.html :

/*
Licenses for TwemojiMozilla.ttf: https://github.com/mozilla/twemoji-colr/blob/master/LICENSE.md#license-for-the-visual-design
Derived from: https://twemoji.twitter.com/
Source: https://xem.github.io/unicode13/emoji.html 
*/
@font-face {
  font-family: "Twemoji from xem.github.io";
  src: url("https://xem.github.io/unicode13/Twemoji.ttf") format("truetype");
  unicode-range: U+00A9-E007F;
  /* @see https://github.com/mozilla/twemoji-colr/issues/56 */
}

:root {
  font-family: "Twemoji from xem.github.io", Segoe UI Emoji, Segoe UI Symbol, Segoe, sans-serif;
}

<p>&#x1F1E9;&#x1F1EA; Deutsch

How to use iemoji on edge

Solution 1:

Related

Recent Posts