Fix font not applying to chat body on claude.ai and chatgpt.com

CHANGELOG.md

@@ -185,3 +185,9 @@ Known issues and notes:
 - Added Google Fonts, system font, bundled font, and custom font flows.
 - Added no-reload page update coverage for font changes, site toggles, profiles,
   and storage updates.
+
+- Fixed Persian/custom fonts not applying to chat body text on claude.ai,
+  chatgpt.com and other site stylesheets. The "author-set inline font" guard
+  matched any inline style containing `font-` (including CSS variables such as
+  `--font-ui-size` or `--_prose-font-body`), which excluded entire page
+  subtrees. It now only matches real `font-family` / `font:` declarations.

assets/styles/aistudio.css

@@ -48,8 +48,8 @@
   ms-cmark-node *,
   textarea
 ):not(
-  [style*="font-"],
-  [style*="font-"] *,
+  :is([style*="font-family" i], [style*="font:" i]),
+  :is([style*="font-family" i], [style*="font:" i]) *,
   pre,
   pre *,
   code,

assets/styles/claude.css

@@ -65,8 +65,8 @@
   body,
   html
 ):not(
-  [style*="font-"],
-  [style*="font-"] *,
+  :is([style*="font-family" i], [style*="font:" i]),
+  :is([style*="font-family" i], [style*="font:" i]) *,
   pre,
   pre *,
   code,
@@ -126,8 +126,8 @@
   legend,
   [role="heading"]
 ):not(
-  [style*="font-"],
-  [style*="font-"] *,
+  :is([style*="font-family" i], [style*="font:" i]),
+  :is([style*="font-family" i], [style*="font:" i]) *,
   pre,
   pre *,
   code,

assets/styles/duckduckgo.css

@@ -54,7 +54,7 @@ body :where(
   .fasr,
   .fat,
   .icofont,
-  [style*="font-"],
+  :is([style*="font-family" i], [style*="font:" i]),
   [class*="icon"],
   [class*="Icon"],
   [class*="symbol"],

assets/styles/facebook.css

@@ -53,7 +53,7 @@ body :where(
   .fasr,
   .fat,
   .icofont,
-  [style*="font-"],
+  :is([style*="font-family" i], [style*="font:" i]),
   [class*="icon"],
   [class*="Icon"],
   [class*="symbol"],

assets/styles/gemini.css

@@ -39,8 +39,8 @@ body :where(
   [role="option"],
   [role="tab"]
 ):not(
-  [style*="font-"],
-  [style*="font-"] *,
+  :is([style*="font-family" i], [style*="font:" i]),
+  :is([style*="font-family" i], [style*="font:" i]) *,
   pre,
   pre *,
   code,

assets/styles/google.css

@@ -53,7 +53,7 @@
   .fasr,
   .fat,
   .icofont,
-  [style*="font-"],
+  :is([style*="font-family" i], [style*="font:" i]),
   [class*="icon"],
   [class*="Icon"],
   [class*="symbol"],

assets/styles/instagram.css

@@ -56,7 +56,7 @@
   .fasr,
   .fat,
   .icofont,
-  [style*="font-"],
+  :is([style*="font-family" i], [style*="font:" i]),
   [class*="icon"],
   [class*="Icon"],
   [class*="symbol"],

assets/styles/linkedin.css

@@ -64,7 +64,7 @@
   .fasr,
   .fat,
   .icofont,
-  [style*="font-"],
+  :is([style*="font-family" i], [style*="font:" i]),
   [class*="icon"],
   [class*="Icon"],
   [class*="symbol"],

assets/styles/notebooklm.css

@@ -36,8 +36,8 @@
   .mat-tonal-button,
   .query-box-input
 ):not(
-  [style*="font-"],
-  [style*="font-"] *,
+  :is([style*="font-family" i], [style*="font:" i]),
+  :is([style*="font-family" i], [style*="font:" i]) *,
   pre,
   pre *,
   code,

assets/styles/trello.css

@@ -54,7 +54,7 @@ body :where(
   .fasr,
   .fat,
   .icofont,
-  [style*="font-"],
+  :is([style*="font-family" i], [style*="font:" i]),
   [class*="icon"],
   [class*="Icon"],
   [class*="symbol"],

assets/styles/wikipedia.css

@@ -53,7 +53,7 @@ body :where(
   .fasr,
   .fat,
   .icofont,
-  [style*="font-"],
+  :is([style*="font-family" i], [style*="font:" i]),
   [class*="icon"],
   [class*="Icon"],
   [class*="symbol"],

assets/styles/x.css

@@ -65,7 +65,7 @@ body {
   .fasr,
   .fat,
   .icofont,
-  [style*="font-"],
+  :is([style*="font-family" i], [style*="font:" i]),
   [class*="icon"],
   [class*="Icon"],
   [class*="symbol"],

assets/styles/youtube.css

@@ -52,7 +52,7 @@ body :where(
   .fasr,
   .fat,
   .icofont,
-  [style*="font-"],
+  :is([style*="font-family" i], [style*="font:" i]),
   [class*="icon"],
   [class*="Icon"],
   [class*="symbol"],

tests/unit/site-css.test.ts

@@ -172,3 +172,17 @@ test("ChatGPT CSS targets the mobile composer without StyleX hashes", () => {
   assert.match(css, /(?:^|,\s*)form\[data-mobile-composer\]\s*(?:,|\{)/m)
   assert.doesNotMatch(css, /(^|[\s,])\.x[a-z\d]+\b/)
 })
+
+test("site CSS only treats real inline font declarations as author-set fonts", () => {
+  // `[style*="font-"]` also matches CSS custom properties such as
+  // `--_prose-font-body: ...` (claude.ai) and excludes the whole subtree.
+  for (const fileName of getSiteStyleFiles()) {
+    const css = fs.readFileSync(path.join(SITE_STYLES_DIR, fileName), "utf8")
+
+    assert.doesNotMatch(
+      css,
+      /\[style\*="font-"/,
+      `${fileName} uses the broad [style*="font-"] guard; match font-family/font: instead`
+    )
+  }
+})