/* ============================================================================ * fonts.css -- Self-hosted webfont @font-face declarations * * Project: EFI / Experiencer Team -- unified UI shell * Owner: /srv/efi-unified-ui/static/css/fonts.css * Served: https://forum.experiencerteam.com/shared/css/fonts.css * Loaded: After tokens.css, before base.css. * * -------------------------------------------------------------------------- * Data dictionary -- font assets declared below * -------------------------------------------------------------------------- * Family Style Weight(s) Disk file (under /shared/fonts/) * ----------- ------ --------- --------------------------------- * Lato normal 300 lato/lato-300.woff2 * Lato normal 400 lato/lato-400.woff2 * Lato normal 700 lato/lato-700.woff2 * Lato normal 900 lato/lato-900.woff2 * Lato italic 400 lato/lato-italic-400.woff2 * Merriweather normal 300-900 merriweather/merriweather-variable.woff2 * (single variable font; covers all 4 spec * weights via the `wght` axis) * * Total: 6 woff2 files (5 static Lato + 1 variable Merriweather). * Total bytes on disk: ~212 KB. Per-weight Lato latin-subset ~23 KB; * Merriweather variable ~97 KB (variable fonts carry weight-axis * interpolation data so are larger than a single static weight, but smaller * than four static weights summed). * * -------------------------------------------------------------------------- * Why variable Merriweather + static Lato? * -------------------------------------------------------------------------- * Google Fonts ships Merriweather v33 ONLY as a variable font (the same * URL is returned for every requested weight). That is in fact the modern * recommended approach: one file covers the whole 300-900 weight range, so * any intermediate weight (e.g. 500) becomes addressable later without a * new download. Lato is still shipped as static per-weight files upstream; * we mirror that. The Q8 spec listed "9 files, one per weight"; with the * variable Merriweather, the 9 logical weight slots remain available but * are served from 6 files on disk -- net win in disk + bandwidth. * * -------------------------------------------------------------------------- * Subset choice -- latin only * -------------------------------------------------------------------------- * Google Fonts splits each weight into `latin` (U+0000-00FF + a handful * of typographic characters) and `latin-ext` (Polish, Czech, Vietnamese, * etc.) subsets. We ship the `latin` subset only -- it covers ASCII + * Latin-1 supplement (so French accents, Spanish enye, German umlaut all * render in webfont). Rarer extended-Latin characters (Polish l-stroke, * Czech c-caron, etc.) fall back to the next @font-face declaration or * the system font. Adding a `-ext` companion declaration later is a pure * addition; no removal of the `latin` rule needed. * * -------------------------------------------------------------------------- * font-display: swap (perceived-performance choice) * -------------------------------------------------------------------------- * Text renders IMMEDIATELY in the fallback font from the var(--font-body) * / var(--font-chrome) stacks declared in tokens.css. Webfont swaps in * silently once it loads (no invisible-text-flash window). Trade-off: * layout shift if webfont metrics differ noticeably from fallback. For * Merriweather, Georgia is a close visual+metric match; for Lato, * -apple-system / Segoe UI / Roboto sit close enough that the swap is * visually quiet on most platforms. * * -------------------------------------------------------------------------- * Source provenance + SHA-256 (verify post-download) * -------------------------------------------------------------------------- * All 6 files downloaded 2026-05-18 UTC from fonts.gstatic.com (the * canonical Google Fonts CDN binary host). Both Lato and Merriweather * are SIL Open Font License 1.1 -- self-hosting is permitted without * attribution requirements beyond the OFL terms. * * File SHA-256 * -------------------------------------------------- --------- * lato/lato-300.woff2 115f6a626ca115d4ad5581b59275327e0e860b30330a52b0f785561332dd2429 * lato/lato-400.woff2 918b7dc3e2e2d015c16ce08b57bcb64d2253bafc1707658f361e72865498e537 * lato/lato-700.woff2 c447dd7677b419db7b21dbdfc6277c7816a913ffda76fd2e52702df538de0e49 * lato/lato-900.woff2 08664859baab5ed98f0bf818ed77e38464ff1826dc6406d5ecbd651409afbd92 * lato/lato-italic-400.woff2 bca1d88ada544d9c80872d4da27133fab6d347361fa26e932b47ec9559088fd0 * merriweather/merriweather-variable.woff2 4fbe8dd9c23b1fd62a988bb8a69b8e692d810f773d9ef6ebca2ba2760c7b11ee * * Re-verify with: * cd /srv/efi-unified-ui/static/fonts * sha256sum lato/*.woff2 merriweather/*.woff2 * ============================================================================ */ /* Lato 300 (light) */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/lato/lato-300.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; } /* Lato 400 (regular) */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/lato/lato-400.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; } /* Lato 700 (bold) */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/lato/lato-700.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; } /* Lato 900 (black) */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/lato/lato-900.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; } /* Lato italic 400 (regular italic) */ @font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/lato/lato-italic-400.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; } /* Merriweather variable (covers weights 300-900 via `wght` axis) */ @font-face { font-family: 'Merriweather'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/merriweather/merriweather-variable.woff2') format('woff2-variations'), url('../fonts/merriweather/merriweather-variable.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; } /* End of fonts.css */