perf(font): self host brand font

shadow81627 · Dec 14, 2019 · a1f47b0 · a1f47b0 · vercel · Dec 14, 2019
1 parent 6dc1a83
commit a1f47b0
Show file tree

Hide file tree

Showing 9 changed files with 650 additions and 11 deletions.
diff --git a/assets/css/fonts.css b/assets/css/fonts.css
@@ -0,0 +1,13 @@
+/* rouge-script-regular - latin */
+@font-face {
+  font-family: 'Rouge Script';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/rouge-script-v8-latin-regular.eot'); /* IE9 Compat Modes */
+  src: local('Rouge Script'), local('RougeScript-Regular'),
+       url('../fonts/rouge-script-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('../fonts/rouge-script-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+       url('../fonts/rouge-script-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
+       url('../fonts/rouge-script-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('../fonts/rouge-script-v8-latin-regular.svg#RougeScript') format('svg'); /* Legacy iOS */
+}
diff --git a/assets/fonts/rouge-script-v8-latin-regular.eot b/assets/fonts/rouge-script-v8-latin-regular.eot
diff --git a/assets/fonts/rouge-script-v8-latin-regular.svg b/assets/fonts/rouge-script-v8-latin-regular.svg
diff --git a/assets/fonts/rouge-script-v8-latin-regular.ttf b/assets/fonts/rouge-script-v8-latin-regular.ttf
diff --git a/assets/fonts/rouge-script-v8-latin-regular.woff b/assets/fonts/rouge-script-v8-latin-regular.woff
diff --git a/assets/fonts/rouge-script-v8-latin-regular.woff2 b/assets/fonts/rouge-script-v8-latin-regular.woff2
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -63,16 +63,7 @@ module.exports = {
         content: pkg.version,
       },
     ],
-    link: [
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
-      {
-        rel: 'stylesheet',
-        href:
-          'https://fonts.googleapis.com/css?family=Rouge+Script&display=swap',
-        lazyload: true,
-        body: true,
-      },
-    ],
+    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
     noscript: [{ innerHTML: 'This website requires JavaScript.' }],
   },
 
@@ -84,7 +75,11 @@ module.exports = {
   /*
    ** Global CSS
    */
-  css: ['~/assets/scss/custom.scss', '~/assets/css/storyblok.css'],
+  css: [
+    '~/assets/scss/custom.scss',
+    '~/assets/css/storyblok.css',
+    '~/assets/css/fonts.css',
+  ],
 
   /*
    ** Plugins to load before mounting the App
@@ -115,6 +110,7 @@ module.exports = {
     '@nuxtjs/dotenv',
     '@nuxtjs/markdownit',
     'nuxt-i18n',
+    'nuxt-webfontloader',
     [
       'storyblok-nuxt',
       {
@@ -174,6 +170,22 @@ module.exports = {
     defaultAssets: false,
   },
 
+  webfontloader: {
+    // google: {
+    //   families: ['Rouge Script', 'Nunito Sans:n4,n6'],
+    //   urls: [
+    //     // for each Google Fonts add url + options you want
+    //     // here add font-display option
+    //     'https://fonts.googleapis.com/css?family=Rouge+Script&display=swap',
+    //     'https://fonts.googleapis.com/css?family=Nunito+Sans:400,600&display=swap',
+    //     // 'https://fonts.googleapis.com/css?family=Roboto:300,700&display=swap'
+    //   ]
+    // },
+    custom: {
+      families: ['Rouge Script'],
+    },
+  },
+
   /*
    ** Build configuration
    */

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "koa": "2.11.0",
     "nuxt": "2.10.2",
     "nuxt-i18n": "6.4.1",
+    "nuxt-webfontloader": "1.1.0",
     "storyblok-nuxt": "1.0.2"
   },
   "devDependencies": {