gatsby-plugin-subfont

Subfont is a command line tool that optimizes font delivery for HTML files.

gatsby-plugin-subfont wraps the tool and automatically runs in your site's homepage.

Install

npm install --save gatsby-plugin-subfont

If you want the ability to run font subsetting locally you'l need Python and install fonttools with this command line:

pip install fonttools brotli zopfli

How to use

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-subfont`,
      options: {
        silent: true,
        fallback: false,
        inlineFonts: true,
      },
    },
  ],
}

Options

See subfont for a full list of options.

| Name | Default | Description | | --------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------- | | root | public | Path to your web root | | canonicalRoot | | URI root where the site will be deployed. Must be either an absolute, a protocol-relative, or a root-relative url | | output | | Directory where results should be written to | | | | fallbacks | true | Include fallbacks so the original font will be loaded when dynamic content gets injected at runtime. | | dynamic | false | Also trace the usage of fonts in a headless browser with JavaScript enabled | | inPlace | true | Modify HTML-files in-place. Only use on build artifacts | | inlineFonts | false | Inline fonts as data-URIs inside the @font-face declaration | | inlineCss | true | Inline CSS that declares the @font-face for the subset fonts | | fontDisplay | swap | Injects a font-display value into the @font-face CSS. Valid values: auto, block, swap, fallback, optional | | formats | ['woff2', 'woff'] | Font formats to use when subsetting. [choices: "woff2", "woff", "truetype"] | | subsetPerPage | false | Create a unique subset for each page. | | recursive | false | Crawl all HTML-pages linked with relative and root relative links. This stays inside your domain | | silent | true | Do not write anything to stdout | | debug | false | Verbose insights into font glyph detection | | dryRun | false | Don't write anything to disk | | inputFiles | ['public/index.html'] | htmlFile(s) or url(s) |