From 48dc8e9367dd49e1e516010fee25ac028c6033f3 Mon Sep 17 00:00:00 2001
From: Sachintha Lakmin <68807141+sachintha-lk@users.noreply.github.com>
Date: Mon, 21 Apr 2025 23:40:52 +0530
Subject: [PATCH] fix: add generic serif fallback before Segoe UI Emoji to fix
 glyph rendering issue #9351

---
 packages/common/src/constants.ts | 10 ++++++++++
 packages/common/src/utils.ts     | 14 +++++++++++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/common/src/constants.ts b/packages/common/src/constants.ts
index cd3bd7a15..17cd0d406 100644
--- a/packages/common/src/constants.ts
+++ b/packages/common/src/constants.ts
@@ -124,6 +124,8 @@ export const CLASSES = {
 export const CJK_HAND_DRAWN_FALLBACK_FONT = "Xiaolai";
 export const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
 
+export const SERIF_FONT_FAMILY = "serif";
+
 /**
  * // TODO: shouldn't be really `const`, likely neither have integers as values, due to value for the custom fonts, which should likely be some hash.
  *
@@ -144,6 +146,14 @@ export const FONT_FAMILY = {
   "Liberation Sans": 9,
 };
 
+// Fonts to use as fallback before FONT_FAMILY_FALLBACKS
+// FONT_FAMILY_FALLBACKS's Segoe UI Emoji fails to properly fallback
+// for some glyphs: ∞, ∫, ≠
+// so we need to have generic font fallback before it
+export const GENERIC_FONT_FAMILIES = [SERIF_FONT_FAMILY];
+export const getGenericFontsForFallbacks: () => string[] = () =>
+  GENERIC_FONT_FAMILIES;
+
 export const FONT_FAMILY_FALLBACKS = {
   [CJK_HAND_DRAWN_FALLBACK_FONT]: 100,
   [WINDOWS_EMOJI_FALLBACK_FONT]: 1000,
diff --git a/packages/common/src/utils.ts b/packages/common/src/utils.ts
index d7ccb17bf..924ef9497 100644
--- a/packages/common/src/utils.ts
+++ b/packages/common/src/utils.ts
@@ -23,6 +23,7 @@ import {
   getFontFamilyFallbacks,
   isDarwin,
   WINDOWS_EMOJI_FALLBACK_FONT,
+  getGenericFontsForFallbacks,
 } from "./constants";
 
 import type { MaybePromise, ResolutionType } from "./utility-types";
@@ -102,9 +103,16 @@ export const getFontFamilyString = ({
   for (const [fontFamilyString, id] of Object.entries(FONT_FAMILY)) {
     if (id === fontFamily) {
       // TODO: we should fallback first to generic family names first
-      return `${fontFamilyString}${getFontFamilyFallbacks(id)
-        .map((x) => `, ${x}`)
-        .join("")}`;
+
+      // Fallback to generic family names first, then to specific font family names
+      // currently only serif is added as a generic font family
+      return `${fontFamilyString}
+            ${getGenericFontsForFallbacks()
+              .map((x) => `, ${x}`)
+              .join("")}
+            ${getFontFamilyFallbacks(fontFamily)
+              .map((x) => `, ${x}`)
+              .join("")}`;
     }
   }
   return WINDOWS_EMOJI_FALLBACK_FONT;