Gatsby instructions

[Daniel Pupius]

📚 Is your documentation request related to a problem?

I would like to see guidance on how to use fontaine with Gatsby.

We're using a pretty standard set up of Gatsby and Sass. I've installed fontaine using the below code in gatsby-node.js. However the override font-face rules aren't created and the font-family isn't being changed.

exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
  const config = getConfig();
  config.plugins.push(
    FontaineTransform.webpack({
      fallbacks: ['BlinkMacSystemFont', 'Segoe UI', 'Helvetica Neue', 'Arial', 'Noto Sans']
    })
  );
  actions.replaceWebpackConfig(config);
};

🔍 Where should you find it?

Ideally README.md

ℹ️ Additional context

No response

[Daniel Roe]

@dpup Any chance of a link to a repo or more details on your setup? When I set up a Gatsby project and add a CSS file with the following content + your config above:

@font-face {
  font-family: 'Roboto';
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2)
    format('woff2');
}

:root {
  font-family: 'Roboto', sans-serif;
}

It produces the following output, as it should:

<!-- rest of page -->
<style data-href="/styles.8b00eb46f301f9f1eedb.css" data-identity="gatsby-global-css">
    @font-face {
      ascent-override: 92.7734375%;
      descent-override: 24.4140625%;
      font-family: Roboto override;
      line-gap-override: 0%;
      src: local("BlinkMacSystemFont"), local("Segoe UI"), local("Helvetica Neue"), local("Arial"), local("Noto Sans")
    }
    @font-face {
      font-display: swap;
      font-family: Roboto;
      src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format("woff2")
    }
    :root {
      font-family: Roboto, Roboto override, sans-serif
    }
  </style>
<!-- rest of page -->

[Daniel Pupius]

Good to know it should work. Our project is rather large.

Do you have an example for use with Sass? That would be my next guess.

[Daniel Roe]

You're quite right; that was the issue. Pushing a fix.

[Daniel Roe]

Let me know if it isn't resolved and I'll happily reopen. 🙏

[Daniel Pupius]

Awesome. Thanks for the speedy turnaround.

[Daniel Roe]

No problem! Don't hesitate to let me know if there's anything else you spot.