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

components/CodeBlock/CodeBlock.tsx

@@ -13,7 +13,7 @@ const Block = styled("div", {
     display: "block",
     overflowX: "auto",
     padding: "1em",
-    fontSize: "0.925em",
+    fontSize: "0.9em",
     tabSize: 2,
 
     // optional line numbers added at time of prism compilation

components/CodeInline/CodeInline.tsx

@@ -3,7 +3,7 @@ import { styled } from "../../lib/styles/stitches.config";
 
 const CodeInline = styled(Code, {
   padding: "0.175em 0.3em",
-  fontSize: "0.975em",
+  fontSize: "0.925em",
   pageBreakInside: "avoid",
 });
 

components/Footer/Footer.tsx

@@ -24,12 +24,11 @@ const Row = styled("div", {
   maxWidth: theme.sizes.maxLayoutWidth,
   margin: "0 auto",
   justifyContent: "space-between",
-  fontSize: "0.85em",
+  fontSize: "0.8em",
   lineHeight: 2.3,
 
   // stack columns on left instead of flexboxing across
   "@medium": {
-    fontSize: "0.8em",
     display: "block",
   },
 });

components/MenuItem/MenuItem.tsx

@@ -36,8 +36,9 @@ const Icon = styled("svg", {
 });
 
 const Label = styled("span", {
-  fontSize: "0.95em",
+  fontSize: "0.925em",
   fontWeight: 500,
+  letterSpacing: "0.02em",
   marginLeft: "0.7em",
 
   "@medium": {

components/PageTitle/PageTitle.tsx

@@ -6,7 +6,7 @@ import type { ComponentPropsWithoutRef } from "react";
 const Title = styled("h1", {
   marginTop: 0,
   marginBottom: "0.6em",
-  fontSize: "2em",
+  fontSize: "1.7em",
   fontWeight: 600,
   textAlign: "center",
 

components/RepositoryCard/RepositoryCard.tsx

@@ -34,7 +34,6 @@ const Meta = styled("div", {
 
 const MetaItem = styled("div", {
   marginRight: "1.5em",
-  fontSize: "0.875em",
   lineHeight: 2,
   color: theme.colors.medium,
 });

components/Selfie/Selfie.tsx

@@ -38,8 +38,9 @@ const SelfieLink = styled(Link, {
 
 const Name = styled("span", {
   margin: "0 0.6em",
-  fontSize: "1.2em",
+  fontSize: "1.15em",
   fontWeight: 500,
+  letterSpacing: "0.01em",
   lineHeight: 1,
 
   "@medium": {

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";
+// main fonts
-export { default as SourceCodePro } from "./loaders/SourceCodePro";
+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`,
+      sans: `${GeistSans.style.fontFamily}, sans-serif`,
-      mono: `${SourceCodePro.style.fontFamily}, monospace`,
+      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",
-      },
-    },
   }
 );
 

next.config.js

@@ -12,6 +12,7 @@ const nextConfig = {
   productionBrowserSourceMaps: true,
   transpilePackages: [
     "@novnc/novnc",
+    "geist", // https://github.com/vercel/geist-font/issues/13#issuecomment-1798598309
     "react-tweet", // https://react-tweet.vercel.app/next#troubleshooting
   ],
   env: {

package.json

@@ -36,6 +36,7 @@
     "fathom-client": "^3.6.0",
     "feed": "^4.2.2",
     "formik": "^2.4.5",
+    "geist": "^1.2.0",
     "gray-matter": "^4.0.3",
     "next": "14.0.4",
     "next-mdx-remote": "^4.4.1",

pages/contact.tsx

@@ -7,7 +7,8 @@ import { styled } from "../lib/styles/stitches.config";
 
 const PGPKey = styled("code", {
   fontSize: "0.925em",
-  wordSpacing: "-0.25em",
+  letterSpacing: "0.075em",
+  wordSpacing: "-0.3em",
 });
 
 const Contact = () => {

pages/index.tsx

@@ -32,7 +32,7 @@ const ColorfulLink = ({
 
 const H1 = styled("h1", {
   margin: "0 0 0.5em -1px", // misaligned left margin, super nitpicky
-  fontSize: "1.8em",
+  fontSize: "1.75em",
   fontWeight: 500,
   lineHeight: 1.1,
   color: theme.colors.text,
@@ -44,7 +44,7 @@ const H1 = styled("h1", {
 
 const H2 = styled("h2", {
   margin: "0.5em 0 0.5em -1px", // misaligned left margin, super nitpicky
-  fontSize: "1.35em",
+  fontSize: "1.2em",
   fontWeight: 400,
   lineHeight: 1.4,
   color: theme.colors.text,
@@ -56,6 +56,7 @@ const H2 = styled("h2", {
 
 const Paragraph = styled("p", {
   margin: "0.85em 0",
+  fontSize: "0.95em",
   lineHeight: 1.7,
   color: theme.colors.text,
 
@@ -64,7 +65,7 @@ const Paragraph = styled("p", {
   },
 
   "@medium": {
-    fontSize: "0.95em",
+    fontSize: "0.925em",
     lineHeight: 1.825,
   },
 });
@@ -92,14 +93,13 @@ const Wave = styled("span", {
 });
 
 const Sup = styled("sup", {
-  margin: "0 0.15em",
+  margin: "0 0.1em",
   fontSize: "0.6em",
 });
 
 const PGPKey = styled("code", {
-  marginLeft: "0.15em",
+  margin: "0 0.15em",
-  fontSize: "1.1em",
+  letterSpacing: "0.075em",
-  fontWeight: 500,
   wordSpacing: "-0.4em",
 });
 
@@ -221,7 +221,7 @@ const Index = () => {
         >
           backend programming
         </ColorfulLink>{" "}
-        back when my only source of income was{" "}
+        when my only source of income was{" "}
         <ColorfulLink
           href="/birthday/"
           title="🎉 Cranky Birthday Boy on VHS Tape 📼"
@@ -301,7 +301,7 @@ const Index = () => {
       </Paragraph>
 
       <Paragraph>
-        You can find more of my work on{" "}
+        You can find my work on{" "}
         <ColorfulLink
           href="https://github.com/jakejarvis"
           rel="me"

pages/projects.tsx

@@ -17,7 +17,6 @@ const Wrapper = styled("div", {
   justifyContent: "space-between",
   alignItems: "flex-start",
   width: "100%",
-  fontSize: "1.1em",
   lineHeight: 1.1,
 });
 
@@ -30,7 +29,6 @@ const Card = styled(RepositoryCard, {
 const ViewMore = styled("p", {
   textAlign: "center",
   marginBottom: 0,
-  fontSize: "1.1em",
   fontWeight: 500,
 });
 

pnpm-lock.yaml

@@ -59,6 +59,9 @@ dependencies:
   formik:
     specifier: ^2.4.5
     version: 2.4.5(react@18.2.0)
+  geist:
+    specifier: ^1.2.0
+    version: 1.2.0(next@14.0.4)
   gray-matter:
     specifier: ^4.0.3
     version: 4.0.3
@@ -2545,6 +2548,14 @@ packages:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
     dev: true
 
+  /geist@1.2.0(next@14.0.4):
+    resolution: {integrity: sha512-RZsgCkGnSi1IV1Ozg3s6Ou4r/jzLff9+47ChjpJ5yX8ncEC/RwdStGwhdFzDcnSv0xU0+9J/fTX5Kht0NajTXA==}
+    peerDependencies:
+      next: ^13.2 || ^14
+    dependencies:
+      next: 14.0.4(react-dom@18.2.0)(react@18.2.0)
+    dev: false
+
   /get-east-asian-width@1.2.0:
     resolution: {integrity: sha512-2nk+7SIVb14QrgXFHcm84tD4bKQz0RxPuMT8Ag5KPOq7J5fEmAg0UbXdTOSHqNuHSU28k55qnceesxXRZGzKWA==}
     engines: {node: '>=18'}