fix(web): Geist Pixel via the variable font, drop faux-bold weight (#2128)

* fix(web): Geist Pixel via the variable font, drop faux-bold weight

The npm geist package only ships five static 500-weight instance files for
the pixel faces, and every .font-pixel usage stacked font-bold/font-semibold
on top — the browser synthesized the bold, smearing the bitmap grid.

Replace it with the official variable woff2 from vercel.com/font (SIL OFL 1.1,
~39KB, self-hosted under web/src/app/fonts/geist-pixel/): single weight 400
with the ELSH element-shape axis, pinned to Square (1) in .font-pixel along
with font-weight: 400 and font-synthesis: none. Remove the now-inert bold
utilities from the pixel headings and drop the geist dependency.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(web): stop forcing aliased rendering on Geist Pixel

The face's "pixels" are vector squares, not a bitmap; -webkit-font-smoothing:
none snapped each square to whole device pixels at inconsistent sizes.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(web): drop the pixel face from 20px section titles

At text-xl each pixel square spans ~1.5 device pixels and the grid goes
mushy; PageHeader (catalog/collections/categories) and the /live title go
back to the pre-#2126 bold sans. The pixel accent stays on the wordmark,
entity titles (24px+), and doc h1s, where the grid resolves cleanly.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: zachdunn

bun.lock

@@ -23,7 +23,6 @@
     "@shikijs/themes": "^4.3.1",
     "@tailwindcss/typography": "^0.5.20",
     "better-auth": "^1.6.23",
-    "geist": "1.7.2",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",
     "next": "^16.2.10",

web/package.json

@@ -94,9 +94,7 @@ export default async function OrgLayout({
             </span>
           )}
           <div className="min-w-0 grow basis-[180px] pt-px">
-            <h1 className="font-pixel text-[27px] font-semibold leading-tight text-[var(--fg)]">
-              {org.name}
-            </h1>
+            <h1 className="font-pixel text-[27px] leading-tight text-[var(--fg)]">{org.name}</h1>
             {metaParts.length > 0 && (
               <div className="mt-2 flex flex-wrap items-center gap-x-2.5 gap-y-1 text-[13px] text-[var(--fg-3)]">
                 {metaParts.map((part, i) => (

web/src/app/[orgSlug]/(org)/layout.tsx

@@ -172,7 +172,7 @@ export async function ProductView({
           <div className="flex-1 min-w-0">
             <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-3">
               <div className="min-w-0">
-                <h1 className="font-pixel text-[28px] font-bold text-stone-900 dark:text-stone-100">
+                <h1 className="font-pixel text-[28px] text-stone-900 dark:text-stone-100">
                   {product.name}
                 </h1>
                 {product.description && (

web/src/app/[orgSlug]/[slug]/_views/product-view.tsx

@@ -0,0 +1,93 @@
+Copyright 2026 The Geist Project Authors (https://github.com/vercel/geist-font)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

web/src/app/fonts/geist-pixel/GeistPixel-Variable.woff2

@@ -70,28 +70,35 @@
   background-color: oklch(0.444 0.011 286.3); /* stone-700 */
 }
 
-/* Geist Pixel display accent (geist/font/pixel, Square variant — bound in
-   layout.tsx). Used on the header wordmark and short, fixed page/entity titles
-   (org + product names, section-index labels, static/legal/docs page titles),
-   NOT on running heads or long release titles where the bitmap grid hurts
-   legibility. It's a semi-mono bitmap face, so pin letter-spacing to 0
-   (overriding any `tracking-*`) and disable subpixel smoothing so the pixels
-   stay crisp; JetBrains Mono is the fallback weight.
+/* Geist Pixel display accent (self-hosted variable font, bound in layout.tsx;
+   `font-variation-settings: "ELSH" 1` pins the Square shape — 0 Regular ·
+   1 Square · 20 Circle · 40 Grid · 60 Triangle · 80 Line). Used on the header
+   wordmark and short, fixed page/entity titles (org + product names,
+   section-index labels, static/legal/docs page titles), NOT on running heads or
+   long release titles where the bitmap grid hurts legibility. It's a
+   single-weight (400) semi-mono face, so pin font-weight to 400 and disable
+   synthesis (a `font-bold` utility would otherwise smear the pixels with faux
+   bold), and pin letter-spacing to 0 (overriding any `tracking-*`). The
+   "pixels" are vector squares, not a bitmap — leave font smoothing alone;
+   `-webkit-font-smoothing: none` renders each square at inconsistent sizes.
+   JetBrains Mono is the fallback weight.
 
    `.font-pixel` is the direct opt-in for JSX headings. `.pixel-doc-title h1`
    is the prose-scoped variant: markdown pages (privacy, terms, security, docs)
    render their title as the body's leading `# …`, so the class goes on the
    wrapping <article> and only re-fonts that top-level h1. */
 :root {
   --font-pixel:
-    var(--font-geist-pixel-square), var(--font-jetbrains-mono), ui-monospace, SFMono-Regular, Menlo,
+    var(--font-geist-pixel), var(--font-jetbrains-mono), ui-monospace, SFMono-Regular, Menlo,
     Monaco, "Liberation Mono", "Courier New", monospace;
 }
 .font-pixel,
 .pixel-doc-title h1 {
   font-family: var(--font-pixel);
+  font-variation-settings: "ELSH" 1;
+  font-weight: 400;
+  font-synthesis: none;
   letter-spacing: 0;
-  -webkit-font-smoothing: none;
 }
 
 /* ── Code (inline + blocks) ── */

web/src/app/fonts/geist-pixel/OFL.txt

@@ -1,7 +1,7 @@
 /// <reference types="react/canary" />
 import type { Metadata } from "next";
 import { JetBrains_Mono } from "next/font/google";
-import { GeistPixelSquare } from "geist/font/pixel";
+import localFont from "next/font/local";
 import Script from "next/script";
 import { ViewTransition } from "react";
 import { ThemeProvider } from "@/components/theme-provider";
@@ -23,6 +23,21 @@ const jetbrainsMono = JetBrains_Mono({
   display: "swap",
 });
 
+// Geist Pixel, self-hosted as the official VARIABLE woff2 from
+// https://vercel.com/font?type=pixel (SIL OFL 1.1 — OFL.txt alongside). The npm
+// `geist` package only ships five static 500-weight instance files; the variable
+// build is a single ~39KB file at weight 400 with a custom ELSH ("Element
+// Shape") axis — 0 Regular · 1 Square · 20 Circle · 40 Grid · 60 Triangle ·
+// 80 Line. `.font-pixel` in globals.css pins the Square shape via
+// `font-variation-settings`.
+const geistPixel = localFont({
+  src: "./fonts/geist-pixel/GeistPixel-Variable.woff2",
+  variable: "--font-geist-pixel",
+  weight: "400",
+  display: "swap",
+  adjustFontFallback: false,
+});
+
 export const metadata: Metadata = {
   title: {
     default: "releases.sh - Product releases and changelogs, indexed for agents",
@@ -68,12 +83,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   // landing partway down the destination instead of at the top. The attribute
   // restores Next's instant scroll-to-top on route changes while keeping smooth
   // scrolling for in-page anchors. See the Next.js 16 upgrade guide.
-  // GeistPixelSquare only registers the `--font-geist-pixel-square` CSS variable
-  // here; the `.font-pixel` class in globals.css binds it to the wordmark + short
-  // entity titles. Nothing renders pixel unless an element opts in.
-  const htmlClassName = ["scroll-smooth", jetbrainsMono.variable, GeistPixelSquare.variable].join(
-    " ",
-  );
+  // geistPixel only registers the `--font-geist-pixel` CSS variable here; the
+  // `.font-pixel` class in globals.css binds it to the wordmark + short entity
+  // titles. Nothing renders pixel unless an element opts in.
+  const htmlClassName = ["scroll-smooth", jetbrainsMono.variable, geistPixel.variable].join(" ");
 
   return (
     <html

web/src/app/globals.css

@@ -28,7 +28,7 @@ export default function LivePage() {
   return (
     <div className="min-h-screen">
       <div className="max-w-3xl mx-auto px-6 pt-8 pb-12">
-        <h1 className="font-pixel text-xl font-bold text-stone-900 dark:text-stone-100 mb-2">
+        <h1 className="text-xl font-bold tracking-tight text-stone-900 dark:text-stone-100 mb-2">
           {TITLE}
         </h1>
         <p className="text-sm text-stone-600 dark:text-stone-400 mb-6">

web/src/app/layout.tsx

@@ -44,7 +44,7 @@ export default async function SearchPage({
     <SearchProvider initialQuery={q ?? ""} initialResults={results} initialRange={range}>
       <div className="min-h-screen">
         <div className="max-w-2xl mx-auto px-6 pt-12 pb-12">
-          <h1 className="font-pixel text-2xl font-semibold mb-4">Search</h1>
+          <h1 className="font-pixel text-2xl mb-4">Search</h1>
           <SearchBar />
           <div className="mt-2 flex justify-end">
             <SearchTimeframe />