Feat: Lazy loading fonts to increase performance

Author: israelmuca

nuxt.config.js

@@ -3,6 +3,7 @@
 module.exports = {
   modules: [
     "nuxtdown",
+    "nuxt-webfontloader",
     ['nuxt-fontawesome', {
       component: 'fab',
       imports: [
@@ -23,6 +24,14 @@ module.exports = {
   env: {
     BASE_URL: process.env.BASE_URL || 'http://localhost:3000'
   },
+  /* 
+  ** Lazy loading fonts for increased performance
+  */
+  webfontloader: {
+    google: {
+      families: ['Eczar:400,500', 'Work Sans:400,500']
+    }
+  },
   /*
   ** Headers for EVERY page
   */
@@ -36,7 +45,6 @@ module.exports = {
     ],
     link: [
       { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
-      { rel: "stylesheet", href: "https://fonts.googleapis.com/css?family=Eczar:400,500|Work+Sans:400,500" }
     ],
   },
   /*

package-lock.json

@@ -23,6 +23,7 @@
     "core-js": "^2.6.5",
     "nuxt": "2.2.0",
     "nuxt-fontawesome": "^0.4.0",
+    "nuxt-webfontloader": "^1.0.0",
     "nuxtdown": "^2.0.3",
     "prismjs": "^1.15.0"
   },