README, general font icon, google fonts API, ready for FontSelector component, testing/fixes with jsPDF

src/App.vue

@@ -1,21 +1,29 @@
 <template>
     <div id="app">
-        <div class="md-layout md-center md-alignment-center-center">
+        <div class="md-layout md-center md-alignment-center-space-between">
             <div class="md-layout-item md-size-50">
                 <md-field>
                     <label for="fonturl">Font URL</label>
                     <md-input id="fonturl" v-model="fontURL"></md-input>
                 </md-field>
             </div>
-            <div class="md-layout-item md-size-20">
-                <md-button class="md-raised md-primary" v-on:click="loadFile(fontURL)">Load Font</md-button>
-            </div>
-            <div class="md-layout-item md-size-20">
-                <md-button class="md-raised md-primary" v-on:click="createPDF">Save PDF</md-button>
+            <div class="md-layout-item md-size-30 md-layout md-alignment-center-right">
+                    <div class="md-layout-item">
+                        <md-button class="md-raised md-primary" v-on:click="loadFile(fontURL)">
+                            Load Font
+                            <md-icon>cached</md-icon>
+                        </md-button>
+                    </div>
+                    <div class="md-layout-item">
+                        <md-button class="md-raised md-primary" v-on:click="createPDF">
+                            Save PDF
+                            <md-icon class="md-size-1x">get_app</md-icon>
+                        </md-button>
+                    </div>
             </div>
             <div class="md-layout-item md-size-100">
-                <md-card style="padding: 0.10em 0.3em;">
-                    <pre v-highlightjs="JSON.stringify({'data': fontData})"><code class="json"></code></pre>
+                <md-card style="padding: 1.5em 1.5em 1.8em;">
+                    <span id="font-data">{{ fontData }}</span>
                 </md-card>
             </div>
         </div>
@@ -23,13 +31,16 @@
 </template>
 
 <style lang="css">
-#app {
-    width: 50%;
-    margin: 60px auto;
-    font-family: Avenir, Helvetica, Arial, sans-serif;
+body, html {
+    font-family: "Roboto", sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
+}
+
+#app {
+    width: 50%;
+    margin: 60px auto;
     color: #2c3e50;
 }
 
@@ -37,12 +48,13 @@
     background-color: transparent !important;
 }
 
-pre {
- white-space: pre-wrap;       /* css-3 */
- white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
- white-space: -pre-wrap;      /* Opera 4-6 */
- white-space: -o-pre-wrap;    /* Opera 7 */
- word-wrap: break-word;       /* Internet Explorer 5.5+ */
+#font-data {
+    padding: 0 2em;
+    white-space: pre-wrap; /* css-3 */
+    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
+    white-space: -pre-wrap; /* Opera 4-6 */
+    white-space: -o-pre-wrap; /* Opera 7 */
+    word-wrap: break-word; /* Internet Explorer 5.5+ */
 }
 </style>
 
@@ -52,7 +64,8 @@ import axios from 'axios';
 
 export default {
     name: 'App',
-    components: {},
+    components: {
+    },
     data() {
         return {
             fontURL: "https://themes.googleusercontent.com/static/fonts/anonymouspro/v3/WDf5lZYgdmmKhO8E1AQud--Cz_5MeePnXDAcLNWyBME.ttf",
@@ -61,18 +74,24 @@ export default {
         }
     },
     methods: {
+        getFonts() {
+            this.directAxios.get({
+                url: `https://www.googleapis.com/webfonts/v1/webfonts?key=${process.env.FONT_API_KEY}`
+            })
+        },
         createPDF() {
             var doc = new jsPDF();
 
-            if(!this.fontData)
+            if (!this.fontData)
                 this.loadFile(this.fontURL)
 
-            doc.addFileToVFS('antic.ttf', this.fontURL);
+            console.log(this.fontData)
+
+            doc.addFileToVFS('antic.ttf', this.fontData);
             doc.addFont('antic.ttf', 'Antic', 'regular')
             doc.setFont('Antic', 'regular');
-            // doc.setFontType("regular");
             doc.setFontSize(15);
-            doc.text("Some Text with Google Fonts", 0, 10);
+            doc.text("Some Text with Google Fonts", 5, 10);
             doc.save('test.pdf');
         },
         loadFile(fontURL) {

src/components/FontSelector.vue

@@ -1,10 +1,31 @@
 <template>
-$END$
+    <div>
+        <md-dialog :md-active.sync="showDialog">
+            <md-dialog-title>Preferences</md-dialog-title>
+
+            <md-tabs md-dynamic-height>
+                <md-tab md-label="General">
+                </md-tab>
+
+                <md-tab md-label="Activity">
+                </md-tab>
+
+                <md-tab md-label="Account">
+                </md-tab>
+            </md-tabs>
+
+            <md-dialog-actions>
+                <md-button class="md-primary" @click="showDialog = false">Close</md-button>
+                <md-button class="md-primary" @click="showDialog = false">Save</md-button>
+            </md-dialog-actions>
+        </md-dialog>
+    </div>
 </template>
 
 <script>
 export default {
-name: "FontSelector"
+    name: "FontSelector",
+    data: () => ({})
 }
 </script>