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
2025-04-26 06:45:23 -04:00 · 2024-01-08 11:10:05 -05:00 · 2024-01-08 11:10:05 -05:00 · e877916f6f
commit e877916f6f
parent ba7a9dc3f6
19 changed files with 46 additions and 59 deletions
--- a/components/CodeBlock/CodeBlock.tsx
+++ b/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
--- a/components/CodeInline/CodeInline.tsx
+++ b/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",
 });

--- a/components/Footer/Footer.tsx
+++ b/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",
  },
 });
--- a/components/MenuItem/MenuItem.tsx
+++ b/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": {
--- a/components/PageTitle/PageTitle.tsx
+++ b/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",

--- a/components/RepositoryCard/RepositoryCard.tsx
+++ b/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,
 });
--- a/components/Selfie/Selfie.tsx
+++ b/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": {
--- a/lib/styles/fonts/index.ts
+++ b/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";
--- a/lib/styles/fonts/loaders/GeistMono.ts
+++ b/lib/styles/fonts/loaders/GeistMono.ts
@ -0,0 +1,3 @@
+import { GeistMono } from "geist/font/mono";
+
+export default GeistMono;
--- a/lib/styles/fonts/loaders/GeistSans.ts
+++ b/lib/styles/fonts/loaders/GeistSans.ts
@ -0,0 +1,3 @@
+import { GeistSans } from "geist/font/sans";
+
+export default GeistSans;
--- a/lib/styles/fonts/loaders/Inter.ts
+++ b/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;
--- a/lib/styles/fonts/loaders/SourceCodePro.ts
+++ b/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;
--- a/lib/styles/stitches.config.ts
+++ b/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",
-      },
-    },
  }
 );

--- a/next.config.js
+++ b/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: {
--- a/package.json
+++ b/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",
--- a/pages/contact.tsx
+++ b/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 = () => {
--- a/pages/index.tsx
+++ b/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",
-  fontSize: "1.1em",
-  fontWeight: 500,
+  margin: "0 0.15em",
+  letterSpacing: "0.075em",
  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"
--- a/pages/projects.tsx
+++ b/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,
 });

--- a/pnpm-lock.yaml
+++ b/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'}