Adding font subsetting option

README.md

@@ -21,6 +21,7 @@ Workflow:
 - Image optimization
 - SVG icon sprites
 - Favicon generation
+- Font subsetting
 - Bourbon / Bitters / Neat
 - ...
 
@@ -90,6 +91,18 @@ location /assets {
 }
 ```
 
+### Self-hosting fonts
+If you already have font files (or at least one), that's great. Otherwise, there's FontSquirrel's [webfont generator](http://www.fontsquirrel.com/tools/webfont-generator) (including subsetting, file conversion, CSS generation and much more).
+
+If Google Fonts are what you want, then [this](https://github.com/majodev/google-webfonts-helper) might be helpful.
+
+After learning about [webfont strategies](https://www.zachleat.com/web/comprehensive-webfonts), you might want to subset your fonts, but rather than doing it manually (uploading, configuring, downloading, ..), let the machine handle it for you: This boilerplate supports font subsetting via [`glyphhanger`](https://github.com/filamentgroup/glyphhanger) when building for production. In order to use this feature, you have to install [`pyftsubset`](https://github.com/fonttools/fonttools) via [pip](https://pypi.org/project/pip) first:
+
+```text
+pip install fonttools
+```
+
+
 **Note: Before publishing your project, be sure to check your `.gitignore` file!**
 
 ## Special Thanks

config.js

@@ -127,4 +127,23 @@ module.exports = {
       },
     },
   },
+  subsetting: {
+    // For more options, see https://github.com/filamentgroup/glyphhanger
+    enable: true,
+    urls: [
+      // In combination with `spider: true`, this should be sufficient:
+      localURL, // Browsersync source
+      // Otherwise, add as many local/external files & URLs as you like:
+      // pkg.homepage,
+      // 'http://example.com',
+      // './example.html'
+    ],
+    formats: ['woff'], // Available formats: 'ttf', 'woff', 'woff-zopfli', 'woff2'
+    spider: false,
+    whitelist: false,
+    us_ascii: false,
+    latin: false,
+    output_css: true,
+    css_selector: false,
+  },
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gulp-kirby-starter-kit",
-  "version": "2.0.0",
+  "version": "2.0.0-beta.2",
   "description": "Getting started with Gulp v4 & Kirby v3 in no-time",
   "author": "S1SYPHOS <[email protected]>",
   "homepage": "https://github.com/S1SYPHOS/Gulp-Kirby-Starter-Kit#readme",
@@ -24,9 +24,11 @@
     "@babel/core": "^7.3.4",
     "@babel/preset-env": "^7.3.4",
     "browser-sync": "^2.26.3",
+    "child_process": "^1.0.2",
     "del": "^4.0.0",
     "eslint": "^5.15.2",
     "eslint-config-google": "^0.12.0",
+    "glyphhanger": "^3.2.0",
     "gulp": "^4.0.0",
     "gulp-autoprefixer": "^6.0.0",
     "gulp-babel": "^8.0.0",
@@ -35,6 +37,7 @@
     "gulp-eslint": "^5.0.0",
     "gulp-favicons": "^2.3.0",
     "gulp-filter": "^5.1.0",
+    "gulp-flatten": "^0.4.0",
     "gulp-if": "^2.0.2",
     "gulp-imagemin": "^5.0.3",
     "gulp-newer": "^1.4.0",

tasks/fonts.js

@@ -5,10 +5,16 @@ Assets - Fonts
 */
 
 const
-  {src, dest, lastRun} = require('gulp'),
+  {src, dest, series, parallel, lastRun} = require('gulp'),
   conf = require('../config'),
 
-  browserSync = require('browser-sync').init
+  subsetSrc = conf.src.fonts + '/subset',
+  subsetDist = conf.dist.fonts + '/subset',
+
+  browserSync = require('browser-sync').init,
+  del = require('del'),
+  {execSync} = require('child_process'),
+  flatten = require('gulp-flatten')
 ;
 
 
@@ -17,15 +23,75 @@ const
  */
 
 function copyFonts() {
-  return src(conf.src.fonts + '/**/*', {since: lastRun(copyFonts)})
+  const filetypes = conf.fonts.allowed.join(',');
+  const fontSource = [
+    conf.src.fonts + '/**/*.{' + filetypes + '}',
+    '!' + subsetSrc + '/**/*',
+  ];
+
+  return src(fontSource, {since: lastRun(copyFonts)})
+    .pipe(flatten())
     .pipe(dest(conf.dist.fonts))
     .pipe(browserSync.stream())
   ;
 }
 
 
+/*
+ * Subsets fonts for smaller filesize
+ */
+
+function subsetFonts(cb) {
+  const option = conf.subsetting;
+  const command = [
+    './node_modules/.bin/glyphhanger ',
+    '--subset=' + subsetSrc + '/*.ttf',
+    option.urls.join(' '),
+    option.formats ? '--formats=' + option.formats.join(',') : '',
+    option.spider ? '--spider' : '',
+    option.whitelist ? '--whitelist=' + option.whitelist : '',
+    option.latin ? '--LATIN' : '',
+    option.us_ascii ? '--US_ASCII' : '',
+    option.output_css ? '--css' : '',
+    option.css_selector ? '--cssSelector="' + option.css_selector + '"' : '',
+    '--output=' + subsetDist,
+    '> ' + subsetSrc + '/result.log',
+  ];
+
+  execSync('mkdir -p ' + subsetDist);
+  execSync(command.filter(Boolean).join(' '));
+  cb();
+}
+
+
+/*
+ * Copies generated font styles to CSS directory
+ */
+
+function copyStyles() {
+  return src(subsetDist + '/*.css')
+    .pipe(dest(conf.dist.styles));
+}
+
+
+/*
+ * Removes CSS files from fonts folder
+ */
+
+function removeCSS() {
+  return del(subsetDist + '/*.css');
+}
+
+
 /*
  * Exports
  */
 
-exports.fonts = copyFonts;
+if (conf.fonts.subsetting.enable && process.env.NODE_ENV === 'production') {
+  exports.fonts = parallel(
+    copyFonts,
+    series(subsetFonts, copyStyles, removeCSS)
+  );
+} else {
+  exports.fonts = copyFonts;
+}