Add font optimizations

Author: good3n

gatsby-config.js

@@ -78,6 +78,29 @@ module.exports = {
     //     mergeSecurityHeaders: false,
     //   },
     // },
+    {
+      /* Include plugin */
+      resolve: 'gatsby-omni-font-loader',
+
+      /* Plugin options */
+      options: {
+        /* Font loading mode */
+        mode: 'async',
+
+        /* Enable font loading listener to handle FOUT */
+        enableListener: true,
+
+        /* Self-hosted fonts config. Add font files and font CSS files to "static" folder */
+        custom: [
+          {
+            /* Exact name of the font as defied in @font-face CSS rule */
+            name: ['Apercu-Mono-Pro'],
+            /* Path to the font CSS file inside the "static" folder with @font-face definition */
+            file: '/assets/fonts/fonts.css',
+          },
+        ],
+      },
+    },
     {
       resolve: `gatsby-plugin-manifest`,
       options: {

package-lock.json

@@ -8,6 +8,7 @@
     "babel-plugin-styled-components": "^2.0.2",
     "dotenv": "^14.1.0",
     "gatsby": "^4.5.2",
+    "gatsby-omni-font-loader": "^1.3.3",
     "gatsby-plugin-anchor-links": "^1.2.1",
     "gatsby-plugin-csp": "^1.1.3",
     "gatsby-plugin-google-analytics": "^4.5.0",