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 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

1// In your gatsby-config.js
2module.exports = {
3  plugins: [
4    {
5      resolve: `gatsby-plugin-subfont`,
6      options: {
7        silent: true,
8        fallbacks: false,
9        inlineFonts: true,
10      },
11    },
12  ],
13}

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)