/* ============================================================================ Maeum — css/fonts.css Self-hosted web fonts (SIL OFL 1.1, licences in /fonts/OFL-*.txt) plus two metric-matched local fallback faces, so the swap from fallback to web font does not move the layout. Files (made by scripts/fonts.sh: fontTools varLib.instancer + pyftsubset): /fonts/EBGaramond-var-400-500.woff2 40 208 B EB Garamond 1.003, wght 400–500 /fonts/Figtree-var-400-600.woff2 17 284 B Figtree 2.002, wght 400–600 Subset = the UNICODES list in scripts/fonts.sh (verified 2026-10-11 against the cmap of both files: every mapped codepoint lies inside it, and Č č Ć ć Đ đ Š š Ž ž are present in both): latin U+0000-00FF and Google Fonts' "latin" extras U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD latin-ext, only what Croatian needs: U+010C-010D Čč, U+0106-0107 Ćć, U+0110-0111 Đđ, U+0160-0161 Šš, U+017D-017E Žž, plus U+0152-0153 Œœ (Not the whole latin-ext block; see scripts/fonts.sh to widen it.) The family stacks that consume these faces live in css/maeum.css (--wa-font-family-heading / --wa-font-family-body). They must name the "… Fallback" family right after the web font: 'EB Garamond', 'EB Garamond Fallback', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif 'Figtree', 'Figtree Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif index.html preloads both WOFF2 files (rel="preload" as="font" crossorigin). ========================================================================== */ /* 1. Web fonts: variable, weight-restricted, font-display: swap. */ @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400 500; /* wordmark, h1–h3, leads: 400; leads on dark bands: 450 */ font-display: swap; src: url('/fonts/EBGaramond-var-400-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0106-0107, U+010C-010D, U+0110-0111, U+0152-0153, U+0160-0161, U+017D-017E, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 600; /* body 400 · action/button labels 500 · strong 600 */ font-display: swap; src: url('/fonts/Figtree-var-400-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0106-0107, U+010C-010D, U+0110-0111, U+0152-0153, U+0160-0161, U+017D-017E, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* 2. Metric-matched fallbacks (CSS Fonts 5: size-adjust, ascent-override, descent-override, line-gap-override — Chrome 92+, Firefox 92+, Safari 17+; older engines ignore the descriptors and simply show Georgia / Arial). Method = Capsize "createFontStack" (also used by Next.js and screenspan.net): size-adjust = (webAvgWidth / webUPM) / (fallbackAvgWidth / fallbackUPM) ascent-override = (webAscent / webUPM) / size-adjust descent-override = (|webDescent| / webUPM) / size-adjust line-gap-override = (webLineGap / webUPM) / size-adjust Browsers multiply the override descriptors by size-adjust, so after the division the fallback's content area equals the web font's: EB Garamond 1.007 + 0.298 = 1.305 em, Figtree 0.950 + 0.250 = 1.200 em, line-gap 0 in both. Numbers read with fontTools 4.60.2 on 2026-10-11 (head.unitsPerEm, hhea, OS/2, hmtx). Average advance width = mean advance over the 2 442 characters of docs/review/copy.json, spaces included — the text the site really sets — at the default instance (wght 400). OS/2 xAvgCharWidth was NOT used: it averages every glyph in the file and is not comparable between a 277-glyph subset and an 1 100-glyph system font (it would give size-adjust ≈ 120 %). Both web fonts set USE_TYPO_METRICS and have hhea == OS/2 typo, so every platform sees the same ascent/descent. Fallback metrics come from the macOS copies in /System/Library/Fonts/Supplemental/ (Georgia.ttf, Arial.ttf). font UPM ascent descent lineGap avg advance (copy.json) EB Garamond 400 (subset) 1000 1007 -298 0 385.04 = 0.3850 em Georgia 2048 1878 -449 0 913.45 = 0.4460 em Figtree 400 (subset) 1000 950 -250 0 446.36 = 0.4464 em Arial 2048 1854 -434 67 914.30 = 0.4464 em Helvetica Neue (reference) 1000 952 -213 28 449.48 = 0.4495 em EB Garamond → Georgia: size-adjust 0.38504 / 0.44602 = 86.3270 % ascent 1.007 / 0.863270 = 116.6494 % descent 0.298 / 0.863270 = 34.5199 % line-gap 0 / 0.863270 = 0 % Figtree → Arial: size-adjust 0.44636 / 0.44644 = 99.9825 % ascent 0.950 / 0.999825 = 95.0166 % descent 0.250 / 0.999825 = 25.0044 % line-gap 0 / 0.999825 = 0 % (Figtree → Helvetica Neue would be 99.3055 / 95.6644 / 25.1748 / 0 %; Arial is chosen because it exists on macOS and Windows and Liberation Sans on Linux is metric-compatible.) Cross-check on x-height: Georgia 986/2048 × 0.8633 = 0.416 em vs EB Garamond 0.400 em; Arial 1062/2048 × 0.9998 = 0.518 em vs Figtree 0.500 em. Weight ranges mirror the web faces so font matching behaves identically; while the web font is still loading, 450/500/600 text shows the fallback's regular weight (no synthetic bold, so advances stay matched). */ @font-face { font-family: 'EB Garamond Fallback'; font-style: normal; font-weight: 400 500; src: local('Georgia'); size-adjust: 86.3270%; ascent-override: 116.6494%; descent-override: 34.5199%; line-gap-override: 0%; } @font-face { font-family: 'Figtree Fallback'; font-style: normal; font-weight: 400 600; src: local('Arial'), local('ArialMT'); size-adjust: 99.9825%; ascent-override: 95.0166%; descent-override: 25.0044%; line-gap-override: 0%; }