font picker

src/App.vue

@@ -2,7 +2,7 @@
   <v-app>
     <v-content>
       <v-container>
-        <div id="gamediv" style="width: 640px; height: 480px; display: block; position: relative">
+        <div id="gamediv" style="width: 640px; height: 480px; display: block; position: relative" class="apply-font">
           <div style="width: 640px; height: 480px; position: absolute; overflow: hidden;">
             <video loop autoplay muted :src="webmsource"></video>
           </div>
@@ -18,7 +18,7 @@
               v-if="showoverlay"
             ></div>
             <template v-if="currentLevel==0">
-              <v-card-title class="pa-6 font-weight-black levelscore">
+              <v-card-title class="pa-6 font-weight-black levelscore apply-font">
                 High Score: {{ highscore }} by {{ highscorer }}
                 <br />
               </v-card-title>
@@ -140,6 +140,13 @@
                 ></v-select>
                 <v-btn @click="startoverlay">Start Cutscene</v-btn>
               </v-col>
+              <v-col cols="1">
+                <font-picker 
+                  :api-key="'AIzaSyCAW_4WvUsVuikytJw_yvJKxHKRHrCsBAs'" 
+                  :options="options" 
+                  :active-font="fontFamily" @change="fontChanged"></font-picker>
+                  </v-col>
+
             </v-row>
           </v-card-text>
         </v-card>
@@ -149,8 +156,14 @@
 </template>
     <script>
 import Vuetify from "vuetify";
+// api key AIzaSyCAW_4WvUsVuikytJw_yvJKxHKRHrCsBAs
+import FontPicker from 'font-picker-vue';
+
 export default {
   vuetify: new Vuetify(),
+  components: {
+    FontPicker
+  },
   beforeMount: function() {
     for (var x = 0; x < this.slides.length; x++) {
       this.slides[x].index = x;
@@ -240,6 +253,11 @@ export default {
     },
     stopoverlay: function() {
       this.showoverlay = false;
+    },
+    fontChanged: function(e) {
+      console.log(e);
+      this.fontFamily=e.family;
+    
     }
   },
   computed: {
@@ -249,6 +267,11 @@ export default {
   },
   data: function() {
     return {
+      options: {
+        sort: 'popularity',
+      },
+      fontFamily: 'Roboto',
+
       overlayimages: [
         { name: "Mask Heart", file: "assets/maskheart.gif" },
         { name: "Fry Dancing", file: "assets/frydancing.gif" },