gatsby-ssr.js

/**
 * Creates a preload link pointing to myFonts' licence counting url. This
 * allows hits to the site to register as font requests with myFonts, but
 * ensures that we are not blocking CSS rendering by waiting for this request
 * to complete.
 *
 * This avoids having to include the following in a CSS file:
 * @import url("//hello.myfonts.net/count/<id>");
 *
 * Refs:
 * https://stackoverflow.com/questions/23045705/how-the-licensed-web-font-is-getting-rendered
 * https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
 */

const React = require("react");

exports.onRenderBody = function({ setHeadComponents }, pluginOptions) {
  setHeadComponents([
    React.createElement("link", {
      key: "fonts",
      href: `//hello.myfonts.net/count/${pluginOptions.myFontsId}`,
      rel: "preload",
      as: "style"
    })
  ]);
};

Thank you! 👍