diff --git a/src/components/font_control/font_control.js b/src/components/font_control/font_control.js
new file mode 100644
index 0000000000..8e2b0e45f6
--- /dev/null
+++ b/src/components/font_control/font_control.js
@@ -0,0 +1,58 @@
+import { set } from 'vue'
+
+export default {
+  props: [
+    'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
+  ],
+  data () {
+    return {
+      lValue: this.value,
+      availableOptions: [
+        this.noInherit ? '' : 'inherit',
+        'custom',
+        ...(this.options || []),
+        'serif',
+        'monospace',
+        'sans-serif'
+      ].filter(_ => _)
+    }
+  },
+  beforeUpdate () {
+    this.lValue = this.value
+  },
+  computed: {
+    present () {
+      return typeof this.lValue !== 'undefined'
+    },
+    dValue () {
+      return this.lValue || this.fallback || {}
+    },
+    family: {
+      get () {
+        return this.dValue.family
+      },
+      set (v) {
+        set(this.lValue, 'family', v)
+        this.$emit('input', this.lValue)
+      }
+    },
+    isCustom () {
+      return this.preset === 'custom'
+    },
+    preset: {
+      get () {
+        if (this.family === 'serif' ||
+            this.family === 'sans-serif' ||
+            this.family === 'monospace' ||
+            this.family === 'inherit') {
+          return this.family
+        } else {
+          return 'custom'
+        }
+      },
+      set (v) {
+        this.family = v === 'custom' ? '' : v
+      }
+    }
+  }
+}
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 85f19eea72..ed36b28062 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -32,66 +32,7 @@
 </div>
 </template>
 
-<script>
-import { set } from 'vue'
-
-export default {
-  props: [
-    'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
-  ],
-  data () {
-    return {
-      lValue: this.value,
-      availableOptions: [
-        this.noInherit ? '' : 'inherit',
-        'custom',
-        ...(this.options || []),
-        'serif',
-        'monospace',
-        'sans-serif'
-      ].filter(_ => _)
-    }
-  },
-  beforeUpdate () {
-    this.lValue = this.value
-  },
-  computed: {
-    present () {
-      return typeof this.lValue !== 'undefined'
-    },
-    dValue () {
-      return this.lValue || this.fallback || {}
-    },
-    family: {
-      get () {
-        return this.dValue.family
-      },
-      set (v) {
-        set(this.lValue, 'family', v)
-        this.$emit('input', this.lValue)
-      }
-    },
-    isCustom () {
-      return this.preset === 'custom'
-    },
-    preset: {
-      get () {
-        if (this.family === 'serif' ||
-            this.family === 'sans-serif' ||
-            this.family === 'monospace' ||
-            this.family === 'inherit') {
-          return this.family
-        } else {
-          return 'custom'
-        }
-      },
-      set (v) {
-        this.family = v === 'custom' ? '' : v
-      }
-    }
-  }
-}
-</script>
+<script src="./font_control.js" ></script>
 
 <style lang="scss">
 @import '../../_variables.scss';