feat: add IBM Plex Mono font

Author: TylerAPfledderer

.storybook/preview.js

@@ -3,6 +3,7 @@ import { action } from "@storybook/addon-actions"
 import theme from "../src/@chakra-ui/gatsby-plugin/theme"
 
 import "../static/fonts/inter-font-face.css"
+import "../static/fonts/ibm-plex-font-face.css"
 
 const chakraBreakpointArray = Object.entries(theme.breakpoints)
 

gatsby-ssr.tsx

@@ -12,7 +12,23 @@ export const onRenderBody = ({ setHeadComponents }: RenderBodyArgs) => {
   setHeadComponents([
     <link
       rel="preload"
-      href="/fonts/Inter-Regular.woff2?v=3.19"
+      href="/fonts/Inter-Regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossOrigin="anonymous"
+      key="interFont"
+    />,
+    <link
+      rel="preload"
+      href="/fonts/Inter-Regular.woff"
+      as="font"
+      type="font/woff"
+      crossOrigin="anonymous"
+      key="interFont"
+    />,
+    <link
+      rel="preload"
+      href="/fonts/IBMPlexMono-Regular.woff2"
       as="font"
       type="font/woff2"
       crossOrigin="anonymous"

src/@chakra-ui/gatsby-plugin/foundations/typography.ts

@@ -2,8 +2,7 @@ const typography = {
   fonts: {
     heading: "Inter, sans-serif",
     body: "Inter, sans-serif",
-    monospace:
-      "SFMono-Regular, Consolas, 'Roboto Mono', 'Droid Sans Mono', 'Liberation Mono', Menlo, Courier, monospace",
+    monospace: "'IBM Plex Mono', Courier, monospace",
   },
 
   lineHeights: {

src/components/Layout.tsx

@@ -30,6 +30,7 @@ import type { Context } from "../types"
 import client from "../apollo"
 
 import "../../static/fonts/inter-font-face.css"
+import "../../static/fonts/ibm-plex-font-face.css"
 
 export interface IProps {
   children?: React.ReactNode

static/fonts/IBMPlexMono-Regular.woff2

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./IBMPlexMono-Regular.woff2") format("woff2");
+}