Issue rendering "Noto Color Emoji" font. On macOS

[supermoos]

Bug: Emoji Rendering Falls Back to System Apple Emoji Font

Description

The emoji rendering code is not correctly using the Noto Color Emoji font and instead falls back to the system Apple emoji font. This causes inconsistent rendering across platforms and doesn't match our design requirements.

Current Implementation

// Font registration
const fontPath = path.resolve(__dirname, "./fonts/NotoColorEmoji-Regular.ttf");
registerFont(fontPath, {
  family: "NotoColorEmoji",
  weight: "regular",
  style: "normal",
});

// Emoji rendering
function renderEmoji(emoji: string, size = 224) {
  const canvas = createCanvas(size, size);
  const ctx = canvas.getContext("2d");
  
  // @ts-ignore
  ctx.textDrawingMode = "glyph";
  ctx.clearRect(0, 0, size, size);
  
  const fontSize = Math.floor(size * 0.6);
  ctx.font = `${fontSize}px "NotoColorEmoji"`;
  
  const verticalPadding = size * 0.2;
  ctx.fillText(emoji, size * 0.125, size / 2 + verticalPadding * 1.125);
  
  return canvas;
}

// Save emoji as image
function saveEmojiImage(emoji: string, outputPath: string, size = 224) {
  const canvas = renderEmoji(emoji, size);
  const buffer = canvas.toBuffer("image/png");
  fs.writeFileSync(outputPath, buffer);
}

Issue

Despite registering the Noto Color Emoji font, the rendered emojis are still using the system Apple emoji font. This happens on macOS systems and causes inconsistency with our design requirements.

Steps to Reproduce

1. Run the emoji rendering code on a macOS system
2. Compare the output images with the expected Noto Color Emoji appearance
3. Notice that the rendered emojis match Apple's emoji style instead of Google's Noto style

Tasks

• Fix the font loading to properly use Noto Color Emoji font
• Ensure the font doesn't fall back to system fonts

Dependencies

• node-canvas
• Noto Color Emoji font
• https://fonts.google.com/noto/specimen/Noto+Color+Emoji?query=emoji