diff --git a/web/src/engine/osk/src/input/gestures/browser/multitap.ts b/web/src/engine/osk/src/input/gestures/browser/multitap.ts
index 8d8ec05e8a..5ceff42864 100644
--- a/web/src/engine/osk/src/input/gestures/browser/multitap.ts
+++ b/web/src/engine/osk/src/input/gestures/browser/multitap.ts
@@ -60,10 +60,7 @@ export default class Multitap implements GestureHandler {
     const tapLookahead = (offset) => (this.tapIndex + offset) % this.multitaps.length;
 
     const updatePreview = () => {
-      previewHost?.setMultitapHint(
-        renameSpecialKey(this.multitaps[tapLookahead(0)].text, vkbd),
-        renameSpecialKey(this.multitaps[tapLookahead(1)].text, vkbd)
-      );
+      previewHost?.setMultitapHint(this.multitaps[tapLookahead(0)], this.multitaps[tapLookahead(1)], vkbd);
     }
 
     source.on('complete', () => {
diff --git a/web/src/engine/osk/src/keyboard-layout/gesturePreviewHost.ts b/web/src/engine/osk/src/keyboard-layout/gesturePreviewHost.ts
index 3dbddf8ae1..7bbcafa8d6 100644
--- a/web/src/engine/osk/src/keyboard-layout/gesturePreviewHost.ts
+++ b/web/src/engine/osk/src/keyboard-layout/gesturePreviewHost.ts
@@ -4,6 +4,8 @@ import EventEmitter from "eventemitter3";
 import { KeyElement } from "../keyElement.js";
 import { FlickNameCoordMap, OrderedFlickDirections } from "../input/gestures/browser/flick.js";
 import { PhoneKeyTipOrientation } from "../input/gestures/browser/keytip.js";
+import { default as VisualKeyboard } from "../visualKeyboard.js";
+import { renameSpecialKey } from "./oskKey.js";
 
 /**With edge lengths of 1, to keep flick-text invisible at the start, the
  * hypotenuse for an inter-cardinal path is sqrt(2).  To keep a perfect circle
@@ -130,10 +132,16 @@ export class GesturePreviewHost extends EventEmitter<EventMap> {
     this.onCancel = handler;
   }
 
-  public setMultitapHint(current: string, next: string) {
+  public setMultitapHint(currentSrc: ActiveKeyBase, nextSrc: ActiveKeyBase, vkbd?: VisualKeyboard) {
+    const current = renameSpecialKey(currentSrc.text, vkbd);
+    const next    = renameSpecialKey(nextSrc.text, vkbd);
+
     this.label.textContent = current;
     this.hintLabel.textContent = next;
 
+    this.label.style.fontFamily     = (current != currentSrc.text) ? 'SpecialOSK' : currentSrc.font ?? this.label.style.fontFamily;
+    this.hintLabel.style.fontFamily = (next != nextSrc.text) ? 'SpecialOSK' : nextSrc.font ?? this.hintLabel.style.fontFamily;
+
     this.emit('startFade');
 
     this.clearFlick();
diff --git a/web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts b/web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts
index c9488235ec..ca6ef432ec 100644
--- a/web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts
+++ b/web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts
@@ -161,11 +161,18 @@ export default class OSKBaseKey extends OSKKey {
 
     // If the base key itself is the source of the hint text, we use `hint` directly.
     // Otherwise, we present the source subkey's key cap as the hint.
-    const text = renameSpecialKey(hintSpec == this.spec ? this.spec.hint : hintSpec.text, vkbd);
+    const baseText = hintSpec == this.spec ? this.spec.hint : hintSpec.text
+    const text = renameSpecialKey(baseText, vkbd);
     if(text == '\u2022') {
       // The original, pre-17.0 longpress dot-hint used bold-face styling.
       skIcon.style.fontWeight='bold';
     }
+
+    if(baseText != text) {
+      // if the text is from a *Special* shorthand, always use our special-key OSK font.
+      skIcon.style.fontFamily = 'SpecialOSK';
+    }
+
     skIcon.textContent = text;
 
     return skIcon;