/* ──────────────────────────────────────────────────────────────────────────────────────────── THE BRAND FACES — self-hosted, and only ever for the app chrome. These are the real fonts from the Drex Comprehensive Brand Guidelines v1.0, replacing the free Google stand-ins the app ran on from June to September 2026 (Courier Prime, DM Mono, Patrick Hand). Built by `scripts/build-brand-fonts.sh`; the .woff2 files are committed. ── THE LICENCE BOUNDARY. Read this before adding a face or a call site. ───────────────────── Pitch + Pitch Sans are licensed from Klim Type Foundry (invoice 26060812, 18 Jun 2026): web use capped at 5,000 monthly unique users, on the domain drex.style. Birdie is licensed from Work by Taylor under their Standard EULA: unlimited webfont use, but the font file itself may not be redistributed or modified. Both licences cover exactly what this file does — @font-face, served from our own origin, to people looking at our site. Neither covers shipping the font BINARY inside a file somebody downloads. That is a live path in this codebase: src/reader/fonts.ts base64-inlines fonts into zine exports, and "pull a copy" hands those files to users. So: app chrome → these faces. Licensed, self-hosted, no third-party request. zine content → stays on the Google substitutes, untouched. Zine content means src/humanzine/serialize.ts, src/humanzine/publish-html.ts, the vendored editor, and the src/reader/ export inliner. A licensed family reaching any of those is a licence breach, which is why there is a guard test pinning it. It also keeps every zine already published from reflowing, which we would want regardless. The domain scope has one more consequence worth stating plainly: app.drex.style and dev.drex.style are covered, and nothing else is. Not a preview deploy on another domain, not a Storybook elsewhere, not a design artifact published to claude.ai. Do not copy these .woff2 files anywhere off drex.style. ── MEASURED METRICS, and what changed ─────────────────────────────────────────────────────── Taken from the actual binaries, normalised to em (hhea ascent / descent / lineGap): face avg width x-height cap-height line box Pitch / P.Sans 0.6120 0.4240 0.5700 1.195 Birdie 0.5910 0.4500 0.5960 1.480 (lineGap 0.28 — unusual) Bitter 0.5900 0.5220 0.6920 1.200 Patrick Hand 0.4310 0.4670 0.6610 1.354 — outgoing — Courier Prime 0.5996 0.4512 0.5796 1.123 DM Mono 0.6000 0.4960 0.7000 1.302 Two consequences that drove the sizing work elsewhere in the stylesheet: 1. Pitch Sans's cap-height is 18.6% SMALLER than DM Mono's. Our commonest pattern is a tiny uppercase small-caps label, and uppercase text is cap-height-driven, so every one of them lost about a fifth of its optical size at the same font-size. Widths, by contrast, barely moved (+2%) — both faces are monospaced at ~0.6em. So the fix was a size bump on the small label roles, never a width fix. 2. Birdie is 37% WIDER than Patrick Hand, with a much taller line box. That is why the hand token was split, and the split follows the INSTRUMENT rather than the mood. Birdie is neat PRINTING by a person, so it takes the eyebrows, the captions and the data labels; Patrick Hand stays behind --font-scrawl for the craft role (.scrawl, Marginalia, coach marks), where a genuine scribble is the point and the tight metrics are load-bearing. What a MACHINE prints is neither, and stays on the mono face: the Dymo tape, the rubber stamps, the forms, the receipts. A Dymo is a label maker, so `.dymo` reads var(--font-mono) (src/styles/hub.css) and DESIGN.md says so — it is the single call this swap most wants to get wrong, because the tape LOOKS like an accent and is in fact a machine. ── Loading ───────────────────────────────────────────────────────────────────────────────── font-display: swap everywhere — text paints immediately in a fallback, never invisible. The two faces above the fold (Pitch Sans Medium, the 125-site workhorse, and Bitter) are preloaded from layout.tsx. Everything is same-origin, so there is no preconnect, no DNS lookup, and no third-party dependency in the chrome's critical path. Bitter ships as a variable font: two files (upright + italic) cover 300/400/500/700, which is every weight the chrome asks for. Pitch and Pitch Sans ship as statics because that is what Klim delivers, and we only need five faces. ──────────────────────────────────────────────────────────────────────────────────────────── */ /* ── Pitch — the display slab. Two jobs, kept distinct (brand PDF p33 vs p36). ──────────────── */ /* Heading role (p36 "Hierarchy"): Pitch Bold, UPRIGHT. This is h1 and the structural headings. */ @font-face { font-family: "Pitch"; src: url("/fonts/brand/pitch-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* Display role (p33 "Display Typeface"): Pitch Semibold ITALIC — the handcrafted live edge, reserved for entrances (.display). The 600–700 range is deliberate: several call sites ask for italic 700, and mapping them onto the real Semibold Italic is far better than letting the browser synthesise a slanted fake from the upright Bold. */ @font-face { font-family: "Pitch"; src: url("/fonts/brand/pitch-semibold-italic.woff2") format("woff2"); font-weight: 600 700; font-style: italic; font-display: swap; } /* ── Pitch Sans — subheads, and every UI label in the app. The workhorse. ───────────────────── */ @font-face { font-family: "Pitch Sans"; src: url("/fonts/brand/pitch-sans-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Pitch Sans"; src: url("/fonts/brand/pitch-sans-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Pitch Sans"; src: url("/fonts/brand/pitch-sans-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ── Birdie — the accent face: eyebrows, captions, data labels. A neat HAND, not a machine. ─── */ /* Birdie ships Regular only. The declared 400–700 range is a deliberate choice: it means a stray `font-weight: 700` renders real Birdie Regular rather than a synthetic bold, which on a hand-drawn face smears the strokes and reads as a rendering bug. If a site genuinely needs more emphasis, give it size, colour, or a different motif — not weight. */ @font-face { font-family: "Birdie"; src: url("/fonts/brand/birdie-regular.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } /* ── Bitter — intro body and body copy. Unchanged family; now self-hosted and variable. ─────── */ @font-face { font-family: "Bitter"; src: url("/fonts/brand/bitter-var.woff2") format("woff2-variations"), url("/fonts/brand/bitter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Bitter"; src: url("/fonts/brand/bitter-italic-var.woff2") format("woff2-variations"), url("/fonts/brand/bitter-italic-var.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; } /* ── Patrick Hand — NOT a brand face. The craft layer's scribble, behind --font-scrawl. ─────── */ /* This one is ours by OFL, not by purchase, and it is here on purpose. DESIGN.md's craft layer invented .scrawl and as deliberate marker scribble — a motif the brand guidelines never asked for and Birdie cannot express, because real Birdie is neat printing. Self-hosted so the chrome makes no third-party font request at all. */ @font-face { font-family: "Patrick Hand"; src: url("/fonts/brand/patrick-hand.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }