diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
index 3d41372e2c..c397c24448 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
@@ -164,11 +164,13 @@
 
 (defn- sample-container-style
   "Inline style that applies the typography font to the (clipped, fixed-height)
-  sample container."
+  sample container. Must be a real JS object (`#js`), not a ClojureScript map:
+  the `:style` value here is a runtime expression, not a literal recognized by
+  the hiccup macro, so it reaches React unconverted."
   [typography]
-  {:font-family (:font-family typography)
-   :font-weight (:font-weight typography)
-   :font-style  (:font-style typography)})
+  #js {:fontFamily (:font-family typography)
+       :fontWeight (:font-weight typography)
+       :fontStyle  (:font-style typography)})
 
 (defn- sample-text-style
   "Inline style that optically centers the sample glyphs. Must be applied to
@@ -177,7 +179,7 @@
   would shift the whole box relative to the row instead of the glyphs inside it."
   [em]
   (when-not (zero? em)
-    {:transform (dm/str "translateY(" em "em)")}))
+    #js {:transform (dm/str "translateY(" em "em)")}))
 
 ;; --- FONT SELECTOR --------------------------------------------------------
 
@@ -219,13 +221,18 @@
              :role "img"
              :aria-label (:name font)}
        [:use {:href (dm/str "#" fonts/preview-sprite-prefix font-id)}]]
-      [:span {:class (stl/css :font-item-label)
-              :style (cond-> {}
-                       loaded?
-                       (assoc :font-family (dm/str "\"" (:family font) "\", sans-serif"))
-                       (not (zero? label-offset))
-                       (assoc :transform (dm/str "translateY(" label-offset "em)")))}
-       (:name font)])))
+      ;; The vertical correction goes on an INNER span, not on `.font-item-label`
+      ;; itself: that class carries its own `overflow: hidden` (from the
+      ;; text-ellipsis mixin, needed to truncate long font names), and a
+      ;; transform applied to a self-clipping element moves its clip region
+      ;; along with it — a no-op. The inner span has no overflow of its own, so
+      ;; the shift actually moves the ink within the outer's fixed clip area.
+      [:span {:class (stl/css :font-item-label)}
+       [:span {:style #js {:fontFamily (when loaded?
+                                         (dm/str "\"" (:family font) "\", sans-serif"))
+                           :transform  (when-not (zero? label-offset)
+                                         (dm/str "translateY(" label-offset "em)"))}}
+        (:name font)]])))
 
 (mf/defc font-item*
   {::mf/wrap [mf/memo]}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
index 99fd0a398f..b6159c2042 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
@@ -101,7 +101,7 @@ $font-preview-box-height: 28px;
   box-sizing: border-box;
   background-color: var(--font-name-wrapper-background-color);
   margin-block-end: var(--sp-s);
-  padding: var(--sp-s) 0 var(--sp-s) var(--sp-m);
+  padding-inline-start: var(--sp-m);
 
   &:focus-within {
     --font-name-wrapper-border-color: var(--color-accent-primary);