diff --git a/src/features/settings/pages/Behavior.module.css b/src/features/settings/pages/Behavior.module.css
index 616b9beb9..c9d19f0f5 100644
--- a/src/features/settings/pages/Behavior.module.css
+++ b/src/features/settings/pages/Behavior.module.css
@@ -37,17 +37,30 @@
 .fontInput {
   width: 220px;
 }
+/* Custom font block (IDEA Appearance): labels share one column, so the UI font,
+   fallback and Size controls all start at the same x. */
 .customFontRow {
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  align-items: start;
+  column-gap: 8px;
+  row-gap: 4px;
+  min-height: 28px;
+  padding: 2px 6px;
+  margin: 0 -6px;
+  border-radius: var(--radius-row);
 }
-.fontOption {
-  display: inline-flex;
+.customFontRow > .fontLabel {
+  padding-top: 3px;
+  white-space: nowrap;
+}
+.customFontRow > .fontCheck {
+  white-space: nowrap;
+}
+.fontControl {
+  display: flex;
   align-items: center;
-  gap: 8px;
-  max-width: 100%;
-}
-.fontOption > label {
-  flex-shrink: 0;
+  min-width: 0;
 }
 .sizeInput {
   width: 64px;
diff --git a/src/features/settings/pages/behavior.tsx b/src/features/settings/pages/behavior.tsx
index 09dddb15f..92d6b7400 100644
--- a/src/features/settings/pages/behavior.tsx
+++ b/src/features/settings/pages/behavior.tsx
@@ -237,16 +237,20 @@ function CustomFontRow() {
   const [size, setSize] = useSetting<number>("appearance.uiFontSize");
   const id = useId();
   const matched = useLabelMatch("Use custom font");
+  // Labels share one column (IDEA Appearance): the UI font, fallback and Size
+  // controls all start at the same x instead of drifting with flex wrapping.
   return (
-    <div className={clsx(styles.fontRow, styles.customFontRow, matched && styles.matched)}>
-      <span className={styles.fontOption}>
+    <div className={clsx(styles.customFontRow, matched && styles.matched)}>
+      <span className={styles.fontCheck}>
         <Checkbox checked={on} onChange={setOn} label={<SearchLabel text="Use custom font:" />} />
+      </span>
+      <span className={styles.fontControl}>
         <FontPicker label="UI font" disabled={!on} value={family} onChange={setFamily} />
       </span>
-      <span className={styles.fontOption}>
-        <label className={clsx(!on && styles.disabled)} htmlFor={`${id}-fallback`}>
-          <SearchLabel text="Fallback font:" />
-        </label>
+      <label className={clsx(styles.fontLabel, !on && styles.disabled)} htmlFor={`${id}-fallback`}>
+        <SearchLabel text="Fallback font:" />
+      </label>
+      <span className={styles.fontControl}>
         <FontPicker
           id={`${id}-fallback`}
           label="UI fallback font"
@@ -256,10 +260,10 @@ function CustomFontRow() {
           allowEmpty
         />
       </span>
-      <span className={styles.fontOption}>
-        <label className={clsx(!on && styles.disabled)} htmlFor={`${id}-size`}>
-          <SearchLabel text="Size:" />
-        </label>
+      <label className={clsx(styles.fontLabel, !on && styles.disabled)} htmlFor={`${id}-size`}>
+        <SearchLabel text="Size:" />
+      </label>
+      <span className={styles.fontControl}>
         {on ? (
           <NumberInput
             id={`${id}-size`}