chore: switch to next/font from fontsource (#584)

Author: cjbell

package.json

@@ -19,7 +19,6 @@
     "@algolia/autocomplete-theme-classic": "^1.6.3",
     "@analytics/segment": "^2.1.0",
     "@byteclaw/use-event-emitter": "^1.0.2",
-    "@fontsource/inter": "^4.2.2",
     "@inkeep/widgets": "^0.2.266",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",

pages/_app.tsx

@@ -1,4 +1,5 @@
 import React, { useRouter } from "next/router";
+import { Inter } from "next/font/google";
 import { ThemeProvider } from "next-themes";
 import { useEffect } from "react";
 import * as analytics from "../lib/analytics";
@@ -11,6 +12,8 @@ import * as gtag from "../lib/gtag";
 import { setClearbitPath } from "../lib/clearbit";
 import { useRemoteRefresh } from "next-remote-refresh/hook";
 
+const inter = Inter({ subsets: ["latin"] });
+
 import "../styles/index.css";
 
 function App({ Component, pageProps }) {
@@ -34,18 +37,20 @@ function App({ Component, pageProps }) {
   }, [router.events]);
 
   return (
-    <ThemeProvider
-      defaultTheme="light"
-      enableSystem={false}
-      forcedTheme={Component.forcedTheme}
-      attribute="class"
-      disableTransitionOnChange
-    >
-      <EventEmitterContext.Provider value={eventEmitter}>
-        <Component {...pageProps} />
-      </EventEmitterContext.Provider>
-      {analytics.SEGMENT_WRITE_KEY && <analytics.Snippet />}
-    </ThemeProvider>
+    <main className={inter.className}>
+      <ThemeProvider
+        defaultTheme="light"
+        enableSystem={false}
+        forcedTheme={Component.forcedTheme}
+        attribute="class"
+        disableTransitionOnChange
+      >
+        <EventEmitterContext.Provider value={eventEmitter}>
+          <Component {...pageProps} />
+        </EventEmitterContext.Provider>
+        {analytics.SEGMENT_WRITE_KEY && <analytics.Snippet />}
+      </ThemeProvider>
+    </main>
   );
 }
 

styles/index.css

@@ -10,42 +10,6 @@
 
 /* Your own custom utilities */
 
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 400;
-  font-display: block;
-  src: url("~@fontsource/inter/files/inter-latin-400-normal.woff")
-    format("woff");
-}
-
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 500;
-  font-display: block;
-  src: url("~@fontsource/inter/files/inter-latin-500-normal.woff")
-    format("woff");
-}
-
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 600;
-  font-display: block;
-  src: url("~@fontsource/inter/files/inter-latin-600-normal.woff")
-    format("woff");
-}
-
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 700;
-  font-display: block;
-  src: url("~@fontsource/inter/files/inter-latin-700-normal.woff")
-    format("woff");
-}
-
 html {
   -webkit-text-size-adjust: 100%;
   box-sizing: border-box;

yarn.lock

@@ -599,11 +599,6 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.2.tgz#d8bae93ac8b815b2bd7a98078cf91e2724ef11e5"
   integrity sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==
 
-"@fontsource/inter@^4.2.2":
-  version "4.5.15"
-  resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-4.5.15.tgz#eed1873d68755d3b52d6fcfcfa3493118430a512"
-  integrity sha512-FzleM9AxZQK2nqsTDtBiY0PMEVWvnKnuu2i09+p6DHvrHsuucoV2j0tmw+kAT3L4hvsLdAIDv6MdGehsPIdT+Q==
-
 "@graphql-typed-document-node/core@^3.1.1":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861"