/* ════════════════════════════════════════════════════════════════════════ fonts.css - Self-hosted Libre Franklin (Proposal 4a, 2026-06-01) ──────────────────────────────────────────────────────────────────────── Replaces the render-blocking Google Fonts that every page used to carry in (two preconnects + a preload-as-style to fonts.googleapis.com / fonts.gstatic.com). On a cold 4G canal connection that third-party round-trip caused a visible flash of system font then a reflow to Libre Franklin (FOUT + CLS) - a classic "web page loading" tell. The font now ships with the app: the woff2 is precached in the service worker SHELL_ASSETS, so the brand font paints from cache on the very first frame, even offline. IMPORTANT - this is a VARIABLE font. Google's css2 API returned ONE identical latin woff2 URL for all four requested weights (400/500/600/700). That only happens for a variable font: the single file carries the whole weight axis (100-900) and the browser synthesises each weight from it. So we declare ONE @font-face with a weight RANGE rather than four near-duplicate rules pointing at four copies of the same bytes. This covers every weight the app uses (300 in one spot, 400/500/600/700 elsewhere) from a single 29 KB file. Subset: latin only (unicode-range U+0000-00FF + the common punctuation / currency / arrows block). The app is Dutch + English, so latin is enough; the cyrillic / vietnamese / latin-ext subsets Google also ships are not downloaded. font-display:swap - paint in the fallback immediately, then swap. After the first install the woff2 is already in the SW cache before first paint, so the swap is invisible. ════════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Libre Franklin'; font-style: normal; /* Variable weight axis. Libre Franklin spans 100-900; the app uses 300/400/500/600/700, all covered by this single declaration. */ font-weight: 100 900; font-display: swap; src: url('/assets/fonts/libre-franklin-variable-latin.woff2') format('woff2'); /* Latin subset (matches Google's "/* latin *​/" block). */ 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; }