ADD: Preload fonts

Author: SoldierCorp

build/webpack.config.js

@@ -32,6 +32,7 @@ module.exports = env => {
       alias: {
         source: path.resolve(__dirname, '../src'), // Relative path of src
         images: path.resolve(__dirname, '../src/assets/images'), // Relative path of images
+        fonts: path.resolve(__dirname, '../src/assets/fonts'), // Relative path of fonts
       }
     },
 

src/assets/fonts/Quicksand-Bold.woff

@@ -1,3 +1,31 @@
 /* src/assets/styles/base/_fonts.scss  */
 
+/*
+  Quicksand
+*/
+
+@font-face {
+  font-family: 'Quicksand';
+  font-weight: 700;
+  src: url('@~fonts/Quicksand-Bold.woff');
+}
+
+@font-face {
+  font-family: 'Quicksand';
+  font-weight: 500;
+  src: url('@~fonts/Quicksand-Medium.woff');
+}
+
+@font-face {
+  font-family: 'Quicksand';
+  font-weight: 400;
+  src: url('@~fonts/Quicksand-Regular.woff');
+}
+
+@font-face {
+  font-family: 'Quicksand';
+  font-weight: 300;
+  src: url('@~fonts/Quicksand-Light.woff');
+}
+
 $quicksand: 'Quicksand', sans-serif;

src/assets/fonts/Quicksand-Light.woff

@@ -40,8 +40,11 @@ html(lang='en')
     link(rel='icon', type='image/png', sizes='16x16', href=require('images/favicons/favicon-16x16.png'))
     link(rel='shortcut icon', href=require('images/favicons/favicon.ico'))
 
-    //- Fonts
-    link(href="https://fonts.googleapis.com/css?family=Quicksand", rel='stylesheet')
+    //- Preload fonts
+    link(type='font/woff', href=require('source/assets/fonts/Quicksand-Bold.woff'), rel='preload', as='font', crossorigin)
+    link(type='font/woff', href=require('source/assets/fonts/Quicksand-Medium.woff'), rel='preload', as='font', crossorigin)
+    link(type='font/woff', href=require('source/assets/fonts/Quicksand-Regular.woff'), rel='preload', as='font', crossorigin)
+    link(type='font/woff', href=require('source/assets/fonts/Quicksand-Light.woff'), rel='preload', as='font', crossorigin)
 
     //- Title
     block title