Merge pull request #10131 from TylerAPfledderer/refactor/inter-font-through-css

Refactor: Bring `Inter` and `IBM Plex Mono` Fonts to Prod / Update Implementation

Author: pettinarip

.storybook/main.js

@@ -12,6 +12,7 @@ module.exports = {
     "@storybook/addon-a11y",
     "@chakra-ui/storybook-addon",
   ],
+  staticDirs: ["../static"],
   babel: async (options) => ({
     ...babelConfig,
   }),

.storybook/preview.js

@@ -2,6 +2,9 @@ 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's Link overrides:

gatsby-ssr.tsx

@@ -18,5 +18,21 @@ export const onRenderBody = ({ setHeadComponents }: RenderBodyArgs) => {
       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"
+      key="interFont"
+    />,
   ])
 }

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

@@ -1,9 +1,9 @@
 const typography = {
-  // TODO: Uncomment when the `Inter` font is included in the project
-  // fonts: {
-  //   heading: "Inter, sans-serif",
-  //   body: "Inter, sans-serif",
-  // },
+  fonts: {
+    heading: "Inter, sans-serif",
+    body: "Inter, sans-serif",
+    monospace: "'IBM Plex Mono', Courier, monospace",
+  },
 
   lineHeights: {
     "5xs": 1.1,

src/@chakra-ui/gatsby-plugin/theme.ts

@@ -29,16 +29,6 @@ const config: ThemeConfig = {
  */
 const theme: ThemeOverride = {
   config,
-  // TODO: fonts object to be removed (it'll now be in the 'foundation' directory)
-  fonts: {
-    // old fonts from the previous theme
-    // TODO: update the fonts when we transition to the Design System
-    heading:
-      "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
-    body: "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
-    monospace:
-      "SFMono-Regular, Consolas, 'Roboto Mono', 'Droid Sans Mono', 'Liberation Mono', Menlo, Courier, monospace",
-  },
   styles,
   ...foundations,
   semanticTokens,

src/components/Fonts.tsx

@@ -28,7 +28,9 @@ import { isMobile } from "../utils/isMobile"
 import type { Context } from "../types"
 
 import client from "../apollo"
-import Fonts from "./Fonts"
+
+import "../../static/fonts/inter-font-face.css"
+import "../../static/fonts/ibm-plex-font-face.css"
 
 export interface IProps {
   children?: React.ReactNode
@@ -107,7 +109,6 @@ const Layout: React.FC<IProps> = ({
   return (
     <ApolloProvider client={client}>
       <ThemeProvider theme={theme}>
-        <Fonts />
         <ZenModeContext.Provider value={{ isZenMode, handleZenModeChange }}>
           <SkipLink hrefId="#main-content" />
           <TranslationBanner

src/components/Layout.tsx

@@ -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");
+}

static/fonts/IBMPlexMono-Regular.woff2

@@ -0,0 +1,32 @@
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./Inter-Regular.woff2") format("woff2"),
+    url("./Inter-Regular.woff") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./Inter-Italic.woff2") format("woff2"),
+    url("./Inter-Italic.woff") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("./Inter-Bold.woff2") format("woff2"),
+    url("./Inter-Bold.woff") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("./Inter-BoldItalic.woff2") format("woff2"),
+    url("./Inter-BoldItalic.woff") format("woff");
+}