switch fonts to Geist Sans and Geist Mono (#1835)

* switch fonts to Geist Sans and Geist Mono

* adjust font sizes slightly

* fix lockfile

* Update contact.tsx

lib/styles/fonts/index.ts

@@ -1,6 +1,9 @@
 // a weird system but makes it impossible to accidentally end up with multiple imports of the same font. see:
 // https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#reusing-fonts
 
-export { default as Inter } from "./loaders/Inter";
-export { default as SourceCodePro } from "./loaders/SourceCodePro";
+// main fonts
+export { default as GeistSans } from "./loaders/GeistSans";
+export { default as GeistMono } from "./loaders/GeistMono";
+
+// one-off fonts
 export { default as ComicNeue } from "./loaders/ComicNeue";

lib/styles/fonts/loaders/GeistMono.ts

@@ -0,0 +1,3 @@
+import { GeistMono } from "geist/font/mono";
+
+export default GeistMono;

lib/styles/fonts/loaders/GeistSans.ts

@@ -0,0 +1,3 @@
+import { GeistSans } from "geist/font/sans";
+
+export default GeistSans;

lib/styles/fonts/loaders/Inter.ts

@@ -1,11 +0,0 @@
-import { Inter as InterLoader } from "next/font/google";
-
-const Inter = InterLoader({
-  weight: "variable",
-  axes: ["slnt"], // workaround for lack of italicized Inter on Google Fonts, see: https://github.com/google/fonts/issues/2386#issuecomment-691503098
-  subsets: ["latin"],
-  display: "fallback",
-  preload: true,
-});
-
-export default Inter;

lib/styles/fonts/loaders/SourceCodePro.ts

@@ -1,11 +0,0 @@
-import { Source_Code_Pro as SourceCodeProLoader } from "next/font/google";
-
-const SourceCodePro = SourceCodeProLoader({
-  weight: "variable",
-  style: ["normal", "italic"],
-  subsets: ["latin"],
-  display: "fallback",
-  preload: true,
-});
-
-export default SourceCodePro;

lib/styles/stitches.config.ts

@@ -6,7 +6,7 @@ import { rgba } from "polished";
 import normalizeCss from "stitches-normalize";
 
 // web fonts
-import { Inter, SourceCodePro } from "./fonts";
+import { GeistSans, GeistMono } from "./fonts";
 
 // https://stitches.dev/docs/typescript#type-a-css-object
 export type CSS = Stitches.CSS<typeof stitchesConfig>;
@@ -23,8 +23,8 @@ export const {
 } = createStitches({
   theme: {
     fonts: {
-      sans: `${Inter.style.fontFamily}, sans-serif`,
-      mono: `${SourceCodePro.style.fontFamily}, monospace`,
+      sans: `${GeistSans.style.fontFamily}, sans-serif`,
+      mono: `${GeistMono.style.fontFamily}, monospace`,
     },
 
     colors: {
@@ -150,18 +150,6 @@ export const globalStyles = globalCss(
     "code, kbd, samp, pre": {
       fontFamily: theme.fonts.mono,
     },
-
-    "em, i": {
-      // workaround for lack of italicized Inter on Google Fonts, see: https://github.com/google/fonts/issues/2386#issuecomment-691503098
-      fontStyle: "oblique 10deg",
-      fontVariationSettings: "'slnt' -10",
-
-      "& :where(code, kbd, samp, pre)": {
-        // unset workaround for well-behaving fonts
-        fontStyle: "italic",
-        fontVariationSettings: "initial",
-      },
-    },
   }
 );