Drawing emojis using coloured SVG fonts, and the emojis show up as black-and-white instead

[Gnbrkm41]

I have successfully drawn emojis in coloured form using ImageSharp using Windows' built-in 'Segoe UI Emoji' font before, and now I am trying to change that font to Twitter's emoji set by using a font that uses something called 'SVG in Open Type' to embed SVG files within a font file.

Here is the minimal code I used to draw the emojis, basically:

FontCollection fonts = new();
fonts.AddSystemFonts();
FontFamily emoji = fonts.Get("Segoe UI Emoji");

Font font = new(emoji, 50);

using Image<Rgba32> image = new(50, 50, new Rgba32(255, 255, 255, 255));
image.Mutate(x => x.DrawText("🥴", font, Color.Black, new Point(0, 0)));
image.SaveAsBmp(@"C:\Users\gotos\Desktop\test.bmp");

(Disregard the bit that went out of the frame) This is using the Segoe UI Emoji font. One can see that the emoji is properly coloured as it should be.

Now here is the same code, modified to use the twemoji font instead (available at https://github.com/13rac1/twemoji-color-font/releases/tag/v14.0.2):

FontCollection fonts = new();
fonts.Add($@"C:\Users\gotos\Desktop\bot\resources\TwitterColorEmoji-SVGinOT.ttf");
FontFamily emoji = fonts.Get("Twitter Color Emoji");

Font font = new(emoji, 50);

using Image<Rgba32> image = new(50, 50, new Rgba32(255, 255, 255, 255));
image.Mutate(x => x.DrawText("🥴", font, Color.Black, new Point(0, 0)));
image.SaveAsPng(@"C:\Users\gotos\Desktop\test.png");

Here the emoji is not coloured and show up as a black-and-white outline fallback instead!

Now, I am not really sure how the technology behind that font works or if ImageSharp supports the said technology. What I want to ask is if ImageSharp is capable of drawing texts using fonts like these, and if so, what have I done wrong here? Why does it 'just work' with Segoe UI Emoji and not with the Twemoji font? Is it not as straightforward as just using the simple approach without having to write the text writing logic myself?

[tocsoft]

Sorry but we don't support the SVG in ttf format for color/emoji fonts. The only emoji font types we support are those that make use of the COLR table which Segoe UI Emoji uses.

[Gnbrkm41]

Ah, I see. So I didn't do anything wrong!

I just worked around it by finding a font that uses COLR instead. For anyone who also wants to use Twemoji, Mozilla has a version of Twemoji font that uses COLR: https://github.com/mozilla/twemoji-colr

[Gibigbig]

thank you, this worked for me.