1.0.0 • Published 4 years ago

metalsmith-subset-font v1.0.0

Weekly downloads
-
License
AGPLv3
Repository
github
Last release
4 years ago

metalsmith-subset-font

A metalsmith plugin for subsetting fonts based on the contents of HTML files.

This plugin uses the Fonttools library to subset fonts based on the HTML file contents to only the glyphs actually found in the HTML files. For example, if you have a font that includes both ASCII and Japanese characters, but only use characters within the ASCII range in your entire site, then the font will be subsetted to remove those Japanese character glyphs, saving a significant amount of space in the font file.

Installation

npm install metalsmith-subset-font

Usage

To use this plugin, simply add it to the existing plugins in your Metalsmith source file or include it in the Metalsmith JSON file:

JavaScript

const Metalsmith = require('metalsmith');
const subsetFont = require('metalsmith-subset-font');

Metalsmith(__dirname)
  .use(subsetFont())
  .build((err, files) => {
    if (err) { throw err; }
  });

JSON

{
  "plugins": {
    "metalsmith-subset-font": {}
  }
}

Options

You can pass options to metalsmith-in-place with the Javascript API or CLI. The options are:

  • htmlPattern: optional. Only HTML files that match this pattern will be processed. Accepts a string or an array of strings. The default is **/*.html.
  • fontPattern: optional. Only Font files that match this pattern will be processed. Accepts a string or an array of strings. The default is **/*.ttf, **/*.otf, **/*.woff, **/*.woff2.

htmlPattern

Only HTML files that match this pattern will be used to determine the unicode characters that will be subsetted. So this Metalsmith JavaScript configuration or metalsmith.json:

JavaScript

const Metalsmith = require('metalsmith');
const subsetFont = require('metalsmith-subset-font');

Metalsmith(__dirname)
  .use(subsetFont({
    htmlPattern: 'blog/**/*.html',
  }))
  .build((err, files) => {
    if (err) { throw err; }
  });

JSON

{
  "source": "src",
  "destination": "build",
  "plugins": {
    "metalsmith-subset-font": {
      "htmlPattern": "blog/**/*.html"
    }
  }
}

Would only process HTML files within the ./src/blog folder, because the pattern is relative to your source folder. See multimatch for further details.

fontPattern

Only Font files that match this pattern will be subsetted. So this Metalsmith JavaScript configuration or metalsmith.json:

JavaScript

const Metalsmith = require('metalsmith');
const subsetFont = require('metalsmith-subset-font');

Metalsmith(__dirname)
  .use(subsetFont({
    fontPattern: 'blog/**/*.ttf',
  }))
  .build((err, files) => {
    if (err) { throw err; }
  });

JSON

{
  "source": "src",
  "destination": "build",
  "plugins": {
    "metalsmith-subset-font": {
      "fontPattern": "blog/**/*.ttf"
    }
  }
}

Would only process TTF font files within the ./src/blog folder, because the pattern is relative to your source folder. See multimatch for further details.

License

AGPLv3

1.0.0

4 years ago