(add) local font support

mdziedzic · Sep 12, 2016 · c17a6a5 · c17a6a5
1 parent 4b45ded
commit c17a6a5
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Lorem Ipsum</title>
+  <link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
+<link href="build/build/style/style.css?2b2e70c1a2c3c67acbe7" rel="stylesheet"></head>
+<body>
+  <div>
+    <h1>Ullamco Laboris</h1>
+    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure <span>dolor in reprehenderit</span> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    <p><a href="page2.html">Page 2</a>
+  </div>
+<script type="text/javascript" src="build/build/index.js?2b2e70c1a2c3c67acbe7"></script></body>
+</html>
diff --git a/package.json b/package.json
@@ -3,7 +3,15 @@
   "version": "1.0.0",
   "description": "Boilerplate for building a static app/website with ES6 and SASS",
   "license": "MIT",
-  "keywords": ["build", "boilerplate", "sass", "es6", "es2015", "static", "transpilaton"],
+  "keywords": [
+    "build",
+    "boilerplate",
+    "sass",
+    "es6",
+    "es2015",
+    "static",
+    "transpilaton"
+  ],
   "author": {
     "name": "Michael Dziedzic",
     "url": "michaeldziedzic.com"
@@ -22,6 +30,7 @@
     "babel-preset-es2015": "^6.14.0",
     "css-loader": "^0.25.0",
     "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^0.9.0",
     "fs": "0.0.1-security",
     "glob": "^7.0.6",
     "gulp": "^3.9.1",
@@ -31,6 +40,8 @@
     "node-sass": "^3.9.0",
     "postcss-loader": "^0.13.0",
     "sass-loader": "^4.0.1",
+    "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
     "webpack": "^1.13.2",
     "webpack-dev-server": "^1.15.1",
     "yargs": "^5.0.0"

diff --git a/page2.html b/page2.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Lorem Ipsum</title>
+  <link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
+<link href="build/build/style/style.css?2b2e70c1a2c3c67acbe7" rel="stylesheet"></head>
+<body>
+  <div>
+    <h1>Page 2</h1>
+    <p><a href="more-html/page3.html">Page 3</a></p><br />
+    <img src="images/boilerplate.jpg" /><br />
+    <cite>Boilerplate</cite><br /><br />
+  </div>
+<script type="text/javascript" src="build/build/index.js?2b2e70c1a2c3c67acbe7"></script></body>
+</html>
diff --git a/source/more-html/page3.html b/source/more-html/page3.html
@@ -8,7 +8,7 @@
 <body>
   <div>
     <h1>Page 3</h1>
-    <p><a href="../index.html">Index</a></p>
+    <p><a href="../index.html">Index (Page 1)</a></p>
     <img src="../images/test/test.jpg" width="300" /><cite>jpg</cite><br />
     <img src="../images/test/test.jpeg" width="300"  /><cite>jpeg</cite><br />
     <img src="../images/test/test.png" width="300"  /><cite>png</cite><br />

diff --git a/source/style/fonts/Lato-Light.ttf b/source/style/fonts/Lato-Light.ttf
diff --git a/source/style/fonts/Lato-Regular.ttf b/source/style/fonts/Lato-Regular.ttf
diff --git a/source/style/style.scss b/source/style/style.scss
@@ -3,7 +3,14 @@ $green: #090;
 $blue: #00f;
 $radius: 30px;
 
+@font-face {
+  font-family: 'Lato';
+  src: url('./fonts/Lato-Regular.ttf');
+}
+
 p {
+  font-family: Lato, sans-serif;
+  font-size: 14px;
   line-height: 1.75em;
 }
 

diff --git a/webpack.config.js b/webpack.config.js
@@ -3,7 +3,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const processHTMLPages = require('./processHTMLHelper.js');
 const autoprefixer = require('autoprefixer');
 
-const extractCSS = new ExtractTextPlugin('./style/style.css');
+const extractCSS = new ExtractTextPlugin('style.css');
 const plugins = [
   extractCSS,
 ].concat(processHTMLPages());
@@ -22,7 +22,19 @@ module.exports = {
       },
       {
         test: [/\.scss$/i, /\.css$/],
-        loader: extractCSS.extract(['css?-minimize', 'postcss', 'sass']),
+        loader: extractCSS.extract('style-loader', 'css?-minimize!postcss!sass'),
+      },
+      {
+        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        loader: 'url-loader?limit=10000&mimetype=application/font-woff',
+      },
+      {
+        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        loader: 'file-loader',
+        query: {
+          name: '[path][name].[ext]',
+          context: './source',
+        },
       },
     ],
   },
@@ -31,11 +43,11 @@ module.exports = {
     extensions: ['', '.js', '.es6'],
   },
   output: {
-    path: `${__dirname}/build`,
+    path: './build',
     filename: 'index.js',
   },
   devServer: {
-    contentBase: `${__dirname}/source`,
+    contentBase: './source',
   },
   plugins,
 };