feat: add support for self-hosted fonts

e2e-tests/development-runtime/gatsby-config.js

@@ -12,6 +12,16 @@ module.exports = {
               variants: [`300`, `400`, `500`],
             },
           ],
+          selfHosted: [
+            {
+              family: `Open Sans`,
+              urls: {
+                woff2: `/OpenSans400.woff2`,
+              },
+              fontStyle: `normal`,
+              fontWeight: 400,
+            },
+          ],
         },
       },
     },

gatsby-plugin-webfonts/README.md

@@ -39,6 +39,20 @@ module.exports = {
               //strategy: 'selfHosted' // 'base64' || 'cdn'
             },
           ],
+          selfHosted: [
+            {
+              family: "Open Sans",
+              urls: {
+                woff2: `/OpenSans400.woff2`,
+                woff: `/OpenSans400.woff`,
+                truetype: `/OpenSans400.ttf`,
+              },
+              //fontStyle: 'normal'
+              //fontDisplay: 'swap',
+              //fontWeight: 400,
+              //cssProperty: 'value'
+            },
+          ],
         },
         //formats: ['woff2', 'woff'],
         //useMinify: true,

gatsby-plugin-webfonts/src/modules/selfHosted.js

@@ -0,0 +1,38 @@
+import postcss from "postcss";
+import postcssJs from "postcss-js";
+
+const defaultFontOptions = {
+  fontDisplay: `swap`,
+};
+
+const getFontFace = async font => {
+  const { family, urls, ...cssProperties } = createFontOptions(font);
+
+  const { css } = await postcss().process(cssProperties, {
+    parser: postcssJs,
+    from: undefined,
+  });
+
+  const src = Object.entries(urls)
+    .map(([format, url]) => `url("${url}") format("${format}")`)
+    .join();
+
+  return `
+    @font-face {
+      font-family: "${family}";
+      src: ${src};
+      ${css}
+    }
+  `;
+};
+
+export default function selfHosted() {
+  return fonts => Promise.all(fonts.map(getFontFace));
+}
+
+function createFontOptions(options) {
+  return {
+    ...defaultFontOptions,
+    ...options,
+  };
+}

gatsby-plugin-webfonts/src/web-fonts.js

@@ -4,10 +4,12 @@ import postcss from "postcss";
 import cssnano from "cssnano";
 
 import google from "./modules/google";
+import selfHosted from "./modules/selfHosted";
 
 export default async function webFonts(options) {
   const modules = {
     google: google(options),
+    selfHosted: selfHosted(),
   };
 
   const merge = async css => {