Gatsby: Create gatsby-plugin-subfont and add it to gatsbyjs.org

[KyleAMathews]

For max font loading speed.

Also next.gatsbyjs.org has some broken preload links for fonts :scream:

[dotlouis]

Hey @KyleAMathews any news on the plugin? I'd love to contribute but don't want to start from scratch if something is already being worked on.

[m-allanson]

@dotlouis there is a rough implementation of this on gatsbyjs.com, unfortunately that's not open source (yet). Hmm actually I can probably just drop the code in here. Feel free to either use it as a starting point or start over:

// gatsby-node.js
exports.onPostBuild = () => {
  const root = path.join(__dirname, `public`)
  const urlPaths = [`/`, `/why-gatsby`, `/how-it-works`]
  const filePaths = urlPaths.reduce(
    (accumulator, currentPath) =>
      `${accumulator} ${path.join(root, currentPath, `index.html`)}`,
    ``
  )

  const command = `node_modules/.bin/subfont -i --no-recursive --inline-css --root file://${root}${filePaths}`
  console.log(`Running subfont: `, command)
  execSync(command)
}

At a minimum you'd probably want a nicer output, maybe a sensible choice of default urls and a config setting to choose your own urls. @KyleAMathews might have some other thoughts on this too.

And for a bit of context, here was me trying to figure out how subfont works :) https://github.com/Munter/subfont/issues/26

[KyleAMathews]

Yeah, feel free to PR here the plugin! Following the pattern Mike published above.

[KyleAMathews]

This issue looks like something we want fixed as well https://github.com/Munter/subfont/pull/28

[fardarter]

This could reasonably be part of the default build process.

It's like code-splitting – nobody who has heard of it doesn't want it, it's just difficult sometimes to get right/set-up.

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!

[KyleAMathews]

Oh I actually did this too haha — it's on npm, check it out!