gatsby-plugin-prefetch-google-fonts/gatsby-ssr.js

A Gatsby plugin to download and prefetch [Google Fonts](https://fonts.google.com/). Can increase performance as opposed to loading webfonts from Google's external stylesheet.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var React = require("react");

var globby = require("globby").sync;

var _require = require("fs"),
    readFileSync = _require.readFileSync;

var path = require("path");

exports.onRenderBody = function (_ref) {
  var _ref$pathPrefix = _ref.pathPrefix,
      pathPrefix = _ref$pathPrefix === void 0 ? "" : _ref$pathPrefix,
      setHeadComponents = _ref.setHeadComponents;
  var files = globby("./public/google-fonts/**/*.woff2");
  var css = readFileSync(path.join("./.cache/google-fonts/", pathPrefix, "google-fonts.css"));
  setHeadComponents((0, _toConsumableArray2.default)(files.map(function (file, key) {
    return React.createElement("link", {
      key: "googleFont".concat(key),
      rel: "preload",
      as: "font",
      type: "font/woff2",
      crossOrigin: "anonymous",
      href: file.replace("./public", pathPrefix)
    });
  })).concat([React.createElement("style", {
    key: "googleFontsCSS",
    type: "text/css",
    dangerouslySetInnerHTML: {
      __html: css
    }
  })]));
};