fonts

index.js

@@ -64,10 +64,34 @@ JSONToSketchData(JSON.parse(modelData)).then(data => {
 import jss from 'jss';
 import preset from 'jss-preset-default';
 import normalize from 'normalize-jss';
+import abril from './fonts/abril-fatface-v12-latin-regular.woff';
+import bellefair from './fonts/bellefair-v6-latin-regular.woff';
+import fascinate from './fonts/fascinate-v11-latin-regular.woff';
+import joti from './fonts/joti-one-v11-latin-regular.woff';
+import lobster from './fonts/lobster-v23-latin-regular.woff';
+import oswald from './fonts/oswald-v36-latin-regular.woff';
+import play from './fonts/play-v12-latin-regular.woff';
+import ranga from './fonts/ranga-v8-latin-regular.woff';
+
+const fontFaces = [
+  { url: abril, family: 'Abril Fatface' }, 
+  { url: bellefair, family: 'Bellefair' },
+  { url: fascinate, family: 'Fascinate' },
+  { url: joti, family: 'Joti One' },
+  { url: lobster, family: 'Lobster' },
+  { url: oswald, family: 'Oswald' },
+  { url: play, family: 'Play' },
+  { url: ranga, family: 'Ranga' },
+];
+
 jss.setup(preset());
 jss.createStyleSheet(normalize).attach();
 jss.createStyleSheet({
-  '@global': {
+    '@font-face': fontFaces.map(({ url, family }) => ({
+        'font-family': family, 
+        'src': `url("${url}") format("woff")`
+    })),
+    '@global': {
     '*': { margin: 0, padding: 0 },
     '#app, body, html': { height: '100%', fontFamily: 'sans-serif' },
     body: { overflow: 'auto' },

package.json

@@ -28,9 +28,9 @@
     "bezier-js": "^2.2.3",
     "blueimp-canvas-to-blob": "^3.14.0",
     "bowser": "^1.8.1",
+    "file-loader": "^0.11.2",
     "fit-curve": "^0.1.6",
     "font-loaded": "^1.0.0",
-    "google-fonts-webpack-plugin": "^0.4.4",
     "imports-loader": "^0.7.1",
     "jss": "^9.4.0",
     "keycode": "^2.1.9",

webpack.config.js

@@ -3,7 +3,6 @@ const path = require('path');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const HTMLWebpackPlugin = require('html-webpack-plugin');
 const CordovaPlugin = require('webpack-cordova-plugin');
-const GoogleFontsPlugin = require('google-fonts-webpack-plugin');
 
 const devMode = process.env.NODE_ENV !== 'production';
 const appMode = process.env.TARGET === 'app';
@@ -68,6 +67,11 @@ module.exports = {
         use: {
           loader: 'raw-loader'
         }
+      }, {
+        test: /\.(woff)$/,
+        use: { 
+          loader: 'file-loader'
+        }
       }, {
         test: /\.css$/,
         use: ['style-loader', 'css-loader']
@@ -90,18 +94,6 @@ module.exports = {
         { name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui, user-scalable=no' }
       ]
     }),
-    new GoogleFontsPlugin({
-      fonts: [
-        { family: 'Oswald' },
-        { family: 'Ranga' },
-        { family: 'Joti One' },
-        { family: 'Bellefair' },
-        { family: 'Lobster' },
-        { family: 'Abril Fatface' },
-        { family: 'Play' },
-        { family: 'Fascinate' }
-      ]
-    }),
     ...(appMode ? [
       new CordovaPlugin({
         config: 'config.xml',