/* * fonts.css - the house typefaces, self-hosted. * * unslop-ignore - the type system is a deliberate brand choice, not a model default. * AS OF 2026-10-06 (operator-approved): Timeless Sans (Grotesk cut) for body and UI, * Timeless Serif for display headings (h1-h3), IBM Plex Mono for eyebrows, sats amounts, * addresses AND very small text (chips, meta rows, footnotes - metadata reads mono). * The previous pairing (Fraunces display + Public Sans UI, the sendbitcoin.gift v2 * reference) was retired after an operator-reviewed preview. Type reasoning and the * iteration log are in docs/UI-TYPE-DECISION.md. * * Why self-hosted rather than the Google Fonts CDN (which this app used to link): * - no third-party request for type, so text renders identically with no internet egress and * no font provider sees our visitors; * - the woff2 files are the exact bytes the reference serves. * (This removes the font CDN only: pages/index.tsx still embeds upstream tweets through * react-twitter-widgets, which does reach platform.twitter.com.) * * Variable vs static, established with fontTools rather than assumed: * serif variable, axes opsz 9-144 + wght 100-900 * sans variable, axis wght 100-900 * mono static, weight 500 * The reference ships 16 faces whose per-weight files are byte-identical, so this declares the * weight RANGE against one file per family and subset instead. Same rendering, ten fewer * requests, roughly 400 KB less duplicated bytes. * * unicode-range values are copied verbatim from the reference. The latin-ext block is what * carries the accented de / fr / es / nl / pt-BR / sl / id locales and, in the mono face, the * bitcoin sign U+20BF. Do not drop latin-ext. * * Roles, matching the reference: serif -> h1/h2/h3; sans -> body and controls; mono -> eyebrows, * sats amounts, addresses. */ @font-face { font-family: 'Fraunces'; /* unslop-ignore */ font-style: normal; font-weight: 100 900; font-display: swap; src: url('./Fraunces-var-latin.woff2') format('woff2'); /* unslop-ignore */ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; /* unslop-ignore */ font-style: normal; font-weight: 100 900; font-display: swap; src: url('./Fraunces-var-latin-ext.woff2') format('woff2'); /* unslop-ignore */ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./PublicSans-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./PublicSans-var-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('./IBMPlexMono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('./IBMPlexMono-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* --------------------------------------------------------------------------- * TIMELESS PREVIEW v2 (2026-10-06) — experimental, not the shipped pairing. * Operator iteration 2: body/UI in Timeless Sans (Grotesk cut); display * headings (h1-h3) in Timeless Serif — the family's display cut, one * superfamily with the body so proportions and rhythm match; very small text * (: chips, meta rows, footnotes) in IBM Plex Mono, because the app's * own rule already reads "metadata = small mono text" (see the expiry note in * globals.css) and chips are metadata. The serif Text cut was tried for that * role in iteration 1 and rejected by the operator. * * Files are byte-as-shipped from Timeless-Type-Family-1.094 under the Timeless * Free Font License 1.2: web embedding and format conversion are permitted * (s5.3), but the fonts may not be modified, renamed or redistributed — which * is why these are the shipped statics under their shipped names, not a * custom cut (s5.4 allows cuts only via their configurator). * ------------------------------------------------------------------------- */ @font-face { font-family: "Timeless Sans"; src: url("timeless/TimelessSans-GroteskRegular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Timeless Sans"; src: url("timeless/TimelessSans-GroteskMedium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Timeless Sans"; src: url("timeless/TimelessSans-GroteskSemibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Timeless Sans"; src: url("timeless/TimelessSans-GroteskBold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Timeless Sans"; src: url("timeless/TimelessSans-GroteskRegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Timeless Sans"; src: url("timeless/TimelessSans-GroteskBoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Timeless Serif"; src: url("timeless/TimelessSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Timeless Serif"; src: url("timeless/TimelessSerif-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Timeless Serif"; src: url("timeless/TimelessSerif-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Timeless Serif"; src: url("timeless/TimelessSerif-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }