diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 99bdb8603..62f8d052d 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -23,7 +23,7 @@
     </div>
     {{ ' ' }}
     <div
-      v-if="modelValue"
+      v-if="modelValue?.family"
       class="font-input setting-item"
     >
       <label
@@ -67,10 +67,10 @@
         </button>
         <input
           :id="name"
-          :model-value="modelValue"
+          :model-value="modelValue.family"
           class="input custom-font"
           type="text"
-          @update:modelValue="$emit('update:modelValue', $event.target.value)"
+          @update:modelValue="$emit('update:modelValue', { ...(modelValue || {}), family: $event.target.value })"
         >
       </span>
       <span
@@ -89,9 +89,9 @@
         </button>
         <Select
           :id="name + '-local-font-switcher'"
-          :model-value="modelValue"
+          :model-value="modelValue?.family"
           class="custom-font"
-          @update:model-value="v => $emit('update:modelValue', v)"
+          @update:model-value="v => $emit('update:modelValue', { ...(modelValue || {}), family: v })"
         >
           <optgroup
             :label="$t('settings.style.themes3.font.group-builtin')"
diff --git a/src/components/status_action_buttons/action_button.scss b/src/components/status_action_buttons/action_button.scss
index 522494cee..df445391a 100644
--- a/src/components/status_action_buttons/action_button.scss
+++ b/src/components/status_action_buttons/action_button.scss
@@ -6,24 +6,19 @@
   display: flex;
   align-items: baseline;
   align-items: center;
-  border: 2px solid transparent;
-
-  .chevron-popover {
-    .popover-trigger-button {
-      display: flex;
-    }
-  }
+  height: 1.5em;
 
   .action-counter {
     overflow-x: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    margin-left: 1em;
   }
 
   .action-button-inner,
   .extra-button {
+    margin: -0.5em;
     padding: 0.5em;
-    z-index: 1;
   }
 
   .separator {
@@ -31,12 +26,27 @@
     align-self: stretch;
     width: 1px;
     background-color: var(--icon);
-    margin: 0.5em 0;
+    margin-left: 0.75em;
+    margin-right: 0.125em;
+  }
+
+  &.-pin {
+    margin: calc(-2px - 0.25em);
+    padding: 0.25em;
+    border: 2px dashed var(--icon);
+    border-radius: var(--roundness);
+    grid-template-columns: minmax(max-content, 1fr) auto;
+
+    .chevron-icon,
+    .extra-button,
+    .separator {
+      display: none;
+    }
   }
 
   .action-button-inner {
     display: grid;
-    grid-gap: 0.125em;
+    grid-gap: 1em;
     grid-template-columns: max-content;
     grid-auto-flow: column;
     grid-auto-columns: max-content;
@@ -62,32 +72,6 @@
       }
     }
   }
-
-  &.-pin {
-    border: 2px dashed var(--icon);
-    border-radius: var(--roundness);
-    grid-template-columns: minmax(max-content, 1fr) auto;
-
-    .action-button-inner {
-      opacity: 0.8;
-      padding-right: 0;
-      pointer-events: none;
-    }
-
-    .chevron-icon,
-    .extra-button,
-    .separator {
-      display: none;
-    }
-  }
-
-  &.-with-extra {
-    .action-button-inner,
-    .extra-button {
-      padding-left: 0.2em;
-      padding-right: 0.25em;
-    }
-  }
 }
 
 .action-button {
@@ -122,7 +106,7 @@
   &.-extra {
     .action-counter {
       justify-self: end;
-      margin-left: 1em;
+      margin-right: 1em;
     }
 
     .chevron-icon {
diff --git a/src/components/status_action_buttons/action_button.vue b/src/components/status_action_buttons/action_button.vue
index f4738a7e6..cab055e64 100644
--- a/src/components/status_action_buttons/action_button.vue
+++ b/src/components/status_action_buttons/action_button.vue
@@ -54,6 +54,7 @@
       <FAIcon
         v-if="button.dropdown?.()"
         class="chevron-icon"
+        size="lg"
         :icon="extra ? 'chevron-right' : 'chevron-up'"
         fixed-width
       />
@@ -70,7 +71,6 @@
     />
     <Popover
       v-if="button.name === 'bookmark'"
-      class="chevron-popover"
       :trigger="extra ? 'hover' : 'click'"
       :placement="extra ? 'right' : 'top'"
       :offset="extra ? { x: 10 } : { y: 10 }"
@@ -79,6 +79,7 @@
       <template #trigger>
         <FAIcon
           class="chevron-icon"
+          size="lg"
           :icon="extra ? 'chevron-right' : 'chevron-up'"
           fixed-width
         />
diff --git a/src/components/status_action_buttons/status_action_buttons.scss b/src/components/status_action_buttons/status_action_buttons.scss
index 72766673b..3bbcdeefb 100644
--- a/src/components/status_action_buttons/status_action_buttons.scss
+++ b/src/components/status_action_buttons/status_action_buttons.scss
@@ -3,19 +3,16 @@
 .StatusActionButtons {
   .quick-action-buttons {
     display: grid;
-    margin-left: -0.5em;
-    grid-template-columns: repeat(auto-fill, minmax(3.5em, 10%));
+    grid-template-columns: repeat(auto-fill, minmax(10%, 3em));
     grid-auto-flow: row dense;
     grid-auto-rows: 1fr;
-    grid-gap: 0.5em 0.1em;
+    grid-gap: 1.25em 0;
     margin-top: var(--status-margin);
   }
 
   .pin-action-button {
-    display: flex;
-    z-index: 1;
+    margin: -0.5em;
     padding: 0.5em;
-    margin: 0;
   }
 }
 // popover
diff --git a/src/components/status_action_buttons/status_action_buttons.vue b/src/components/status_action_buttons/status_action_buttons.vue
index c45c2e592..c1d0d9571 100644
--- a/src/components/status_action_buttons/status_action_buttons.vue
+++ b/src/components/status_action_buttons/status_action_buttons.vue
@@ -1,14 +1,11 @@
 <template>
   <div class="StatusActionButtons">
-    <span
-      class="quick-action-buttons"
-      :class="{ '-pin': showPin }"
-      >
+    <span class="quick-action-buttons">
       <span
         v-for="button in quickButtons"
         :key="button.name"
         class="quick-action"
-        :class="{ '-pin': showPin, '-toggle': button.dropdown?.(), '-with-extra': button.name === 'bookmark' }"
+        :class="{ '-pin': showPin, '-toggle': button.dropdown?.() }"
       >
         <ActionButtonContainer
           :class="{ '-pin': showPin }"
@@ -33,6 +30,7 @@
           <FAIcon
             v-if="showPin && currentUser"
             fixed-width
+            class="fa-scale-110"
             icon="thumbtack"
           />
         </button>
@@ -40,7 +38,6 @@
       <Popover
         trigger="click"
         :trigger-attrs="triggerAttrs"
-        class="quick-action"
         :tabindex="0"
         placement="top"
         :offset="{ y: 5 }"
@@ -49,7 +46,7 @@
       >
         <template #trigger>
           <FAIcon
-            class="action-button-inner"
+            class="fa-scale-110 "
             icon="ellipsis-h"
           />
         </template>
diff --git a/src/modules/default_config_state.js b/src/modules/default_config_state.js
index 9c4146b92..5f797126d 100644
--- a/src/modules/default_config_state.js
+++ b/src/modules/default_config_state.js
@@ -635,22 +635,22 @@ export const LOCAL_DEFAULT_CONFIG_DEFINITIONS = {
   },
   fontInterface: {
     description: 'Interface font override',
-    type: 'string',
+    type: 'object',
     default: null,
   },
   fontInput: {
     description: 'Input font override',
-    type: 'string',
+    type: 'object',
     default: null,
   },
   fontPosts: {
     description: 'Post font override',
-    type: 'string',
+    type: 'object',
     default: null,
   },
   fontMonospace: {
     description: 'Monospace font override',
-    type: 'string',
+    type: 'object',
     default: null,
   },
   themeDebug: {
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index aa323ac91..996d444f5 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -262,7 +262,7 @@ export const convertTheme2To3 = (data) => {
     Object.keys(data.fonts || {}).forEach((key) => {
       if (!fontsKeys.has(key)) return
       if (!data.fonts[key]) return
-      const originalFont = data.fonts[key]
+      const originalFont = data.fonts[key].family
       const rule = { source: '2to3' }
 
       switch (key) {
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 7dcb97fed..d415cdb27 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -619,7 +619,7 @@ export const generateFonts = (input) => {
     rules: {
       fonts: Object.entries(fonts)
         .filter(([, v]) => v)
-        .map(([k, v]) => `--${k}Font: ${v}`)
+        .map(([k, v]) => `--${k}Font: ${v.family}`)
         .join(';'),
     },
     theme: {
diff --git a/src/stores/interface.js b/src/stores/interface.js
index 111700fbb..3da844a3b 100644
--- a/src/stores/interface.js
+++ b/src/stores/interface.js
@@ -196,7 +196,7 @@ export const useInterfaceStore = defineStore('interface', {
       }
     },
     setFontsList(value) {
-      this.localFonts = [...new Set(value.map((font) => font)).values()]
+      this.localFonts = [...new Set(value.map((font) => font.family)).values()]
     },
     queryLocalFonts() {
       if (this.localFonts !== null) return
@@ -654,7 +654,7 @@ export const useInterfaceStore = defineStore('interface', {
         }
 
         Object.entries(fontMap).forEach(([font, component]) => {
-          const family = mergedConfig[`font${font}`]
+          const family = mergedConfig[`font${font}`]?.family
           const variable = font === 'Monospace' ? '--monoFont' : '--font'
           if (family) {
             hacks.push({
diff --git a/test/unit/specs/stores/sync_config.spec.js b/test/unit/specs/stores/sync_config.spec.js
index 4a502f626..83324f62b 100644
--- a/test/unit/specs/stores/sync_config.spec.js
+++ b/test/unit/specs/stores/sync_config.spec.js
@@ -238,8 +238,8 @@ describe('The SyncConfig store', () => {
         store.pushSyncConfig = () => {
           /* no-op */
         }
-        store.setPreference({ path: 'simple.fontInput', value: 'test' })
-        store.unsetPreference({ path: 'simple.fontInput' })
+        store.setPreference({ path: 'simple.fontInput.family', value: 'test' })
+        store.unsetPreference({ path: 'simple.fontInput.family' })
         store.updateCache(store, { username: 'test' })
         expect(store.prefsStorage.simple.fontInput).to.not.have.property(
           'family',