Merge pull request #13 from ethereum/fonts

Fonts setup

Author: nhsz

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

@@ -1,8 +1,8 @@
 const typography = {
   fonts: {
-    heading: "Inter, sans-serif",
-    body: "Inter, sans-serif",
-    monospace: "'IBM Plex Mono', Courier, monospace",
+    heading: "var(--font-inter)",
+    body: "var(--font-inter)",
+    monospace: "var(--font-mono)",
   },
 
   lineHeights: {

src/lib/fonts.ts

@@ -0,0 +1,13 @@
+import { Inter } from "next/font/google"
+import { IBM_Plex_Mono } from "next/font/google"
+
+export const inter = Inter({
+  subsets: ["latin"],
+  fallback: ["sans-serif"],
+})
+
+export const mono = IBM_Plex_Mono({
+  subsets: ["latin"],
+  weight: ["400"],
+  fallback: ["Courier", "monospace"],
+})

src/pages/_app.tsx

@@ -6,11 +6,24 @@ import { ChakraProvider } from "@chakra-ui/provider"
 // Chakra custom theme
 import theme from "@/@chakra-ui/theme"
 
+// Fonts
+import { inter, mono } from "@/lib/fonts"
+
 const App = ({ Component, pageProps }: AppProps) => {
   return (
-    <ChakraProvider theme={theme}>
-      <Component {...pageProps} />
-    </ChakraProvider>
+    <>
+      <style jsx global>
+        {`
+          :root {
+            --font-inter: ${inter.style.fontFamily};
+            --font-mono: ${mono.style.fontFamily};
+          }
+        `}
+      </style>
+      <ChakraProvider theme={theme}>
+        <Component {...pageProps} />
+      </ChakraProvider>
+    </>
   )
 }