Replace Glide with Inter and Geist Mono

.changeset/remove-glide.md

@@ -0,0 +1,2 @@
+---
+---

apps/web/app/globals.css

@@ -9,10 +9,10 @@
   --breakpoint-3xl: 1600px;
   --breakpoint-4xl: 2000px;
   --font-sans:
-    var(--font-glide), ui-sans-serif, system-ui, -apple-system, "Segoe UI",
+    var(--font-inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI",
     sans-serif;
   --font-mono:
-    var(--font-glide-mono), ui-monospace, "SFMono-Regular", "SF Mono", Menlo,
+    var(--font-geist-mono), ui-monospace, "SFMono-Regular", "SF Mono", Menlo,
     Consolas, "Liberation Mono", monospace;
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);

apps/web/app/layout.tsx

@@ -1,31 +1,22 @@
 import { Agentation } from "agentation";
 import type { Metadata, Viewport } from "next";
-import localFont from "next/font/local";
+import { Geist_Mono, Inter } from "next/font/google";
 import type React from "react";
 
 import { siteConfig } from "@/lib/config";
 
 import "./globals.css";
 
-/*
- * The italic face is not loaded. `next/font/local` preloads every `src` in a
- * family, and the italic woff2 is 117 KB competing with the roman on the
- * critical path for a face this app never renders: there is no `<em>`, `<i>`
- * or `italic` class anywhere in it, and docs pages are served with Blode.md's
- * own fonts rather than these. Add it back alongside the first italic text.
- */
-const glide = localFont({
+const inter = Inter({
   display: "swap",
-  src: [{ path: "./fonts/glide-variable.woff2", style: "normal" }],
-  variable: "--font-glide",
-  weight: "100 950",
+  subsets: ["latin"],
+  variable: "--font-inter",
 });
 
-const glideMono = localFont({
+const geistMono = Geist_Mono({
   display: "swap",
-  src: "./fonts/glide-mono.woff2",
-  variable: "--font-glide-mono",
-  weight: "400",
+  subsets: ["latin"],
+  variable: "--font-geist-mono",
 });
 
 export const viewport: Viewport = {
@@ -95,7 +86,7 @@ const RootLayout = ({
   children: React.ReactNode;
 }>) => (
   <html
-    className={`${glide.variable} ${glideMono.variable} min-h-screen font-sans antialiased`}
+    className={`${inter.variable} ${geistMono.variable} min-h-screen font-sans antialiased`}
     lang="en"
   >
     <body className="flex min-h-screen flex-col">

apps/web/app/og-image-shared.tsx

@@ -6,7 +6,7 @@ import type { ReactNode } from "react";
 
 /**
  * Layout helper for this zone's social card. The zone owns the route, the
- * brand colours, and the mark. This file only sets type in Glide and the
+ * brand colours, and the mark. This file only sets type in Inter and the
  * poster lockup (mark at the top, title on the baseline).
  *
  * It is not served by blode-co. `app/opengraph-image.tsx` in this repo is the
@@ -34,10 +34,10 @@ export const OG_CONTENT_TYPE = "image/png";
 const ogAsset = (file: string) =>
   path.join(process.cwd(), "lib/og-assets", file);
 
-const glideFonts = [
+const ogFonts = [
   {
-    data: readFileSync(ogAsset("glide-600.ttf")),
-    name: "Glide",
+    data: readFileSync(ogAsset("inter-600.ttf")),
+    name: "Inter",
     style: "normal" as const,
     weight: 600 as const,
   },
@@ -81,7 +81,7 @@ export const renderZoneOgImage = ({
         style={{
           color,
           display: "flex",
-          fontFamily: "Glide",
+          fontFamily: "Inter",
           fontSize: titleSize,
           fontWeight: 600,
           letterSpacing: "-0.02em",
@@ -95,5 +95,5 @@ export const renderZoneOgImage = ({
     </div>
   );
 
-  return new ImageResponse(content, { ...OG_SIZE, fonts: glideFonts });
+  return new ImageResponse(content, { ...OG_SIZE, fonts: ogFonts });
 };

examples/web/src/app/globals.css

@@ -111,7 +111,7 @@
   --color-chart-5: var(--chart-5);
   --radius: var(--radius);
   --shadow-input: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --font-glide:
+  --font-sans:
     ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, sans-serif;
   --font-heading:
@@ -120,7 +120,7 @@
 }
 
 body {
-  font-family: var(--font-glide);
+  font-family: var(--font-sans);
   color: var(--color-foreground);
   background: var(--color-background);
 }