From a05a3321d5c53f244bb2426a8e07883eac0f86ec Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Wed, 11 Mar 2026 13:44:22 +0900
Subject: [PATCH 1/2] Apply font styles directly to spans

The universal selector was overriding this since the font styles
only applied to the div, not the span.

Fixes #5675
---
 src/browser/renderer/dom/DomRenderer.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/browser/renderer/dom/DomRenderer.ts b/src/browser/renderer/dom/DomRenderer.ts
index c3d63b8e7..5a0aea561 100644
--- a/src/browser/renderer/dom/DomRenderer.ts
+++ b/src/browser/renderer/dom/DomRenderer.ts
@@ -178,7 +178,7 @@ export class DomRenderer extends Disposable implements IRenderer {
 
     // Base CSS
     let styles =
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} {` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}, ${this._terminalSelector} .${ROW_CONTAINER_CLASS} span {` +
       // Disabling pointer events circumvents a browser behavior that prevents `click` events from
       // being delivered if the target element is replaced during the click. This happened due to
       // refresh() being called during the mousedown handler to start a selection.

From e7a4578933a0b6d77d001e304ef7c2055760ab63 Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Wed, 11 Mar 2026 16:01:41 +0900
Subject: [PATCH 2/2] Don't apply color to the spans

---
 src/browser/renderer/dom/DomRenderer.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/browser/renderer/dom/DomRenderer.ts b/src/browser/renderer/dom/DomRenderer.ts
index 5a0aea561..8f9a09351 100644
--- a/src/browser/renderer/dom/DomRenderer.ts
+++ b/src/browser/renderer/dom/DomRenderer.ts
@@ -178,12 +178,15 @@ export class DomRenderer extends Disposable implements IRenderer {
 
     // Base CSS
     let styles =
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}, ${this._terminalSelector} .${ROW_CONTAINER_CLASS} span {` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} {` +
       // Disabling pointer events circumvents a browser behavior that prevents `click` events from
       // being delivered if the target element is replaced during the click. This happened due to
       // refresh() being called during the mousedown handler to start a selection.
       ` pointer-events: none;` +
       ` color: ${colors.foreground.css};` +
+      `}`;
+    styles +=
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}, ${this._terminalSelector} .${ROW_CONTAINER_CLASS} span {` +
       ` font-family: ${this._optionsService.rawOptions.fontFamily};` +
       ` font-size: ${this._optionsService.rawOptions.fontSize}px;` +
       ` font-kerning: none;` +