2 files changed, 20 insertions, 32 deletions
diff --git a/src/components/font_control/font_control.js b/src/components/font_control/font_control.js
index d3e4680f..137ef9c0 100644
--- a/src/components/font_control/font_control.js
+++ b/src/components/font_control/font_control.js
@@ -1,13 +1,10 @@
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faChevronDown
-)
+import { set } from 'vue'
+import Select from '../select/select.vue'
 
 export default {
+  components: {
+    Select
+  },
   props: [
     'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
   ],
@@ -39,8 +36,8 @@ export default {
         return this.dValue.family
       },
       set (v) {
-        this.lValue.family = v
-        this.$emit('update:modelValue', this.lValue)
+        set(this.lValue, 'family', v)
+        this.$emit('input', this.lValue)
       }
     },
     isCustom () {
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 0cee2edc..ddda218b 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -22,30 +22,20 @@
       class="opt-l"
       :for="name + '-o'"
     />
-    <label
-      :for="name + '-font-switcher'"
-      class="select"
+    <Select
+      :id="name + '-font-switcher'"
+      v-model="preset"
       :disabled="!present"
+      class="font-switcher"
     >
-      <select
-        :id="name + '-font-switcher'"
-        v-model="preset"
-        :disabled="!present"
-        class="font-switcher"
+      <option
+        v-for="option in availableOptions"
+        :key="option"
+        :value="option"
       >
-        <option
-          v-for="option in availableOptions"
-          :key="option"
-          :value="option"
-        >
-          {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
-        </option>
-      </select>
-      <FAIcon
-        class="select-down-icon"
-        icon="chevron-down"
-      />
-    </label>
+        {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
+      </option>
+    </Select>
     <input
       v-if="isCustom"
       :id="name"
@@ -65,7 +55,8 @@
     min-width: 10em;
   }
   &.custom {
-    .select {
+    /* TODO Should make proper joiners... */
+    .font-switcher {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }