add font selector

src/page/Home.vue

@@ -14,6 +14,14 @@
           <input type="range" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" min="1" max="10" step="0.1" v-model="subheadingSize" id="subheading-size">
         </div>
 
+        <div class="pb-6">
+          <label class="block text-sm font-medium text-gray-700" for="subheading">Font</label>
+
+          <select v-model="font" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+            <option v-for="font in fonts" :key="font.value" :value="font.value" v-text="font.label"></option>
+          </select>
+        </div>
+
         <div>
           <div class="text-center stroke-gray-400">
             <button v-on:click="headingAlign = 'left'">
@@ -122,7 +130,6 @@
 <style>
 .og {
   background: #cecece;
-  font-family: Trebuchet MS;
   max-width: 10px;
   margin: auto;
 }
@@ -152,6 +159,7 @@ export default {
       heading: localStorage.getItem('heading'),
       subheading: localStorage.getItem('subheading'),
       headingAlign: localStorage.getItem('headingAlign') ?? 'left',
+      font: localStorage.getItem('font') ?? 'Trebuchet MS',
       avatar: localStorage.getItem('avatar'),
       logo: localStorage.getItem('logo'),
       textColor: localStorage.getItem('textColor') ?? '#333333',
@@ -165,6 +173,19 @@ export default {
       quality: localStorage.getItem('quality') ?? 0.9,
       contentPadding: localStorage.getItem('contentPadding') ?? 2.5,
       ogMaxWidth: 100,
+
+      fonts: [
+        {label: 'Arial (sans-serif)', value : 'Arial'},
+        {label: 'Brush Script MT (cursive)', value : 'Brush Script MT'},
+        {label: 'Calibri (sans-serif)', value : 'Calibri'},
+        {label: 'Courier New (monospace)', value : 'Courier New'},
+        {label: 'Garamond (serif)', value : 'Garamond'},
+        {label: 'Georgia (serif)', value : 'Georgia'},
+        {label: 'Tahoma (sans-serif)', value : 'Tahoma'},
+        {label: 'Times New Roman (serif)', value : 'Times New Roman'},
+        {label: 'Trebuchet MS (sans-serif)', value : 'Trebuchet MS'},
+        {label: 'Verdana (sans-serif)', value : 'Verdana'},
+      ],
     }
   },
   methods: {
@@ -172,7 +193,8 @@ export default {
       return {
         color: this.textColor,
         width: `${this.width}px`,
-        maxWidth: `${this.ogMaxWidth}px`
+        maxWidth: `${this.ogMaxWidth}px`,
+        fontFamily: this.font,
       }
     },
     ogImageStyle() {
@@ -311,6 +333,9 @@ export default {
     contentPadding(value) {
       localStorage.setItem('contentPadding', value)
     },
+    font(value) {
+      localStorage.setItem('font', value)
+    },
   },
   mounted() {
     this.updateOgMaxWidth()