/* Self-hosted brand fonts. Replaces the two third-party round trips to fonts.googleapis.com and fonts.gstatic.com, which were the bulk of a 3.6s first paint on mobile. Unbounded and Inter are both SIL Open Font License. Montserrat and Bebas Neue were dropped: Montserrat only ever sat as a fallback behind Unbounded, and the one rule using Bebas (.t-hero-condensed) is on no page. v2 (2026-09-20) adds metric-matched fallback faces. Why: With font-display: swap and no metric overrides, the page first painted in Arial and then reflowed when Unbounded arrived. Unbounded is 31% wider than Arial at the same size, so every headline rewrapped and pushed the whole document down. Lighthouse recorded that as a single CLS 0.63 shift on
, and mobile PageSpeed became a coin flip: 96-99 when the font won the race, 55-63 when it lost. Eight of thirteen runs lost it. The fix is not to stop using swap, which would cost the brand font. It is to make the fallback occupy the same space as the real font, so the swap is invisible. The numbers below were measured, not guessed: both faces were rendered in Chromium on the live site and compared against Arial via canvas TextMetrics. Unbounded width 10434 ascent 100 descent 25 Inter width 8364 ascent 97 descent 24 Arial width 7952 ascent 91 descent 21 size-adjust is the width ratio. ascent/descent are divided by that ratio because size-adjust rescales every metric of the face, including the overridden ones. Same arithmetic as fontaine and next/font. local() order matters. Arial first, then the Arial-metric clones that Linux boxes carry (Liberation Sans, Arimo) because Google's Lighthouse runners have no Arial. Helvetica is deliberately NOT listed: it measured 8% narrower than Arial, so it would silently break the ratio these overrides depend on. If none resolve, the face is skipped and the stack falls through to the plain fallbacks, which is the old behaviour and no worse. */ @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('fonts/unbounded-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: 'Unbounded'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('fonts/unbounded-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: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/inter-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: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/inter-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; } /* ---- metric-matched fallbacks: what the page paints in before the real font lands, sized so that nothing moves when it does ---- Banded by weight, because one ratio does not fit. Unbounded is a variable face and gets materially wider as it gets heavier, while the fallback is a static face that does not: Unbounded 400 10434 Unbounded 800 11119 Arial 400 7952 Unbounded 700 10947 Unbounded 900 11289 A single 400-derived size-adjust of 131.21% left the weight-800 section headings about 6% too narrow, which is enough to drop a heading from two rendered lines to one. Measured on the real page: "Built on partnerships." went 63px to 32px. The bands below are each derived from the weight that dominates that band in this site's CSS (700 x18, 800 x17, 900 x6, 600 x5, 400 x4), with the 800-900 band weighted between 800 and 900 by usage. Every band resolves to Arial REGULAR on purpose. Basing the heavy bands on Arial Bold would match the visual weight, but local('Arial Bold') resolution differs across platforms and Google's Lighthouse runners have no Arial at all. Getting that base wrong costs about 6%, the same size as the bug being fixed, so the base is kept deterministic and the width is corrected through size-adjust instead. The tradeoff is that pre-swap headings render at regular weight for the moment before the real font arrives. Layout stability is worth more than weight fidelity in that window. ascent/descent are divided by each band's own size-adjust, since size-adjust rescales the overridden metrics too. */ @font-face { font-family: 'Unbounded Fallback'; font-weight: 400 500; src: local('Arial'), local('Liberation Sans'), local('Arimo'); size-adjust: 131.21%; ascent-override: 76.21%; descent-override: 19.05%; line-gap-override: 0%; } @font-face { font-family: 'Unbounded Fallback'; font-weight: 600 700; src: local('Arial'), local('Liberation Sans'), local('Arimo'); size-adjust: 137.66%; ascent-override: 72.64%; descent-override: 18.16%; line-gap-override: 0%; } @font-face { font-family: 'Unbounded Fallback'; font-weight: 800 900; src: local('Arial'), local('Liberation Sans'), local('Arimo'); size-adjust: 140.38%; ascent-override: 71.24%; descent-override: 17.81%; line-gap-override: 0%; } @font-face { font-family: 'Inter Fallback'; font-weight: 400 500; src: local('Arial'), local('Liberation Sans'), local('Arimo'); size-adjust: 105.18%; ascent-override: 92.22%; descent-override: 22.82%; line-gap-override: 0%; } @font-face { font-family: 'Inter Fallback'; font-weight: 600 700; src: local('Arial'), local('Liberation Sans'), local('Arimo'); size-adjust: 108.15%; ascent-override: 89.69%; descent-override: 22.19%; line-gap-override: 0%; }