google fonts workaround

lib/styles/fonts/loaders/Inter.ts

@@ -2,6 +2,7 @@ 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,

lib/styles/fonts/loaders/SourceCodePro.ts

@@ -2,6 +2,7 @@ import { Source_Code_Pro as SourceCodeProLoader } from "next/font/google";
 
 const SourceCodePro = SourceCodeProLoader({
   weight: "variable",
+  style: ["normal", "italic"],
   subsets: ["latin"],
   display: "fallback",
   preload: true,

lib/styles/stitches.config.ts

@@ -139,8 +139,11 @@ export const globalStyles = globalCss(
     systemFonts: false,
   }),
   {
-    body: {
+    html: {
       fontFamily: theme.fonts.sans,
+    },
+
+    body: {
       backgroundColor: theme.colors.backgroundInner,
       transition: `background ${theme.transitions.fade}`,
     },
@@ -148,6 +151,18 @@ 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",
+      },
+    },
   }
 );