/* ============================================================================ Talking Chair — 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. Replaces the draft's Google Fonts (which also loaded Manrope, never used by any rule, and Playfair Display 500, never used either). Files (made by scripts/fonts.sh = fontTools 4.60.2 varLib.instancer + pyftsubset, sources google/fonts@5b35b72 ofl/playfairdisplay and ofl/dmsans, built 2026-10-26): /fonts/PlayfairDisplay-400.woff2 29 200 B Playfair Display 1.203, wght pinned to 400 (static, 480 glyphs) /fonts/DMSans-var-opsz9-24-400-600.woff2 30 732 B DM Sans 4.004, opsz 9–24, wght 400–600 (variable, 312 glyphs) Subset = the UNICODES list in scripts/fonts.sh (identical to Maeum's): latin U+0000-00FF + Google Fonts' "latin" extras, and from 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 Œœ. Verified 2026-10-26 with fontTools against the cmap of both files: Playfair maps 237 code points, DM Sans 230, every one of them inside the list, Č č Ć ć Đ đ Š š Ž ž present in both. The copy (docs/review/copy.json) uses exactly U+00A9 © U+00B7 · U+0107 ć U+010D č U+0111 đ U+0161 š U+017E ž U+2014 — U+2193 ↓ outside ASCII; all nine are mapped in both files. The family stacks that consume these faces live in css/talkingchair.css (--wa-font-family-heading / --wa-font-family-body) and must name the "… Fallback" family right after the web font: 'Playfair Display', 'Playfair Display Fallback', Georgia, 'Times New Roman', serif 'DM Sans', 'DM Sans Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif index.html preloads both WOFF2 files (rel="preload" as="font" crossorigin). ========================================================================== */ /* 1. Web fonts. DM Sans keeps its optical-size axis: the initial value of the font-optical-sizing property is `auto`, so with nothing set every engine maps opsz = the CSS font size in px, and 12–13 px eyebrows, 16–17 px body and 19–20 px leads each get their own design (css/talkingchair.css must not set font-optical-sizing: none). The draft's Google Fonts query, which asked for wght only, served a static instance at opsz 14 for every size. Measured on the shipped file: '0' advance 656 units at opsz 9, 684 at 14, 686 at 16, 693 at 24; x-height 526 → 502 → 496 units over the same range. */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; /* h1–h3 + wordmark: Regular only */ font-display: swap; src: url('/fonts/PlayfairDisplay-400.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: 'DM Sans'; font-style: normal; font-weight: 400 600; /* body 400 · action/button labels 500 · strong, eyebrows, "Lokacije" 600 */ font-display: swap; src: url('/fonts/DMSans-var-opsz9-24-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", exactly as documented in maeum css/fonts.css section 2: 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: Playfair 1.082 + 0.251 = 1.333 em, DM Sans 0.992 + 0.310 = 1.302 em, line-gap 0 in both. Numbers re-read from the shipped WOFF2 files with fontTools 4.60.2 on 2026-10-26 (head.unitsPerEm, hhea, OS/2, hmtx; DM Sans instantiated with varLib.instancer at opsz 16 / wght 400, the body instance). Average advance width = mean advance over the 3 350 characters of the string values in docs/review/copy.json, concatenated, spaces included — the text the site really sets. For the Playfair/Georgia pair the mean runs over 3 348 characters because Georgia has no U+2193 "↓" (it occurs only in the CTA label, which is set in DM Sans). OS/2 xAvgCharWidth was NOT used (see Maeum). Both web fonts set USE_TYPO_METRICS and have hhea == OS/2 typo, so every platform sees the same ascent/descent (DM Sans' win metrics 1012/310 are therefore unused). Fallback metrics come from the macOS copies in /System/Library/Fonts/Supplemental/ (Georgia.ttf "Version 5.00x-4", Arial.ttf "Version 5.01.2x"); only their advances matter, their own ascent/descent are listed for reference and are replaced by the overrides. font UPM ascent descent lineGap avg advance (copy.json) Playfair Display 400 1000 1082 -251 0 449.55 = 0.449545 em Georgia (hhea) 2048 1878 -449 0 908.89 = 0.443792 em DM Sans opsz 16 / wght 400 1000 992 -310 0 460.75 = 0.460751 em (opsz 9: 0.4658 em, opsz 17: 0.4607 em) Arial (hhea) 2048 1854 -434 67 910.32 = 0.444492 em Playfair → Georgia: size-adjust 0.449545 / 0.443792 = 101.2963 % ascent 1.082 / 1.012963 = 106.8153 % descent 0.251 / 1.012963 = 24.7788 % line-gap 0 / 1.012963 = 0 % DM Sans → Arial: size-adjust 0.460751 / 0.444492 = 103.6579 % ascent 0.992 / 1.036579 = 95.6994 % descent 0.310 / 1.036579 = 29.9061 % line-gap 0 / 1.036579 = 0 % Cross-check on x-height: Georgia 986/2048 × 1.012963 = 0.488 em vs Playfair 0.514 em; Arial 1062/2048 × 1.036579 = 0.538 em vs DM Sans (opsz 16) 0.502 em. The same computation over the client's draft (body text with tags stripped, 3 357 characters) gives 101.2985 / 106.8130 / 24.7782 and 103.6476 / 95.7089 / 29.9090 — within 0.01 percentage points, so the choice of text does not matter. Weight ranges mirror the web faces so font matching behaves identically; while the web font is still loading, 500/600 text shows the fallback's regular weight (no synthetic bold, so advances stay matched). */ @font-face { font-family: 'Playfair Display Fallback'; font-style: normal; font-weight: 400; src: local('Georgia'); size-adjust: 101.2963%; ascent-override: 106.8153%; descent-override: 24.7788%; line-gap-override: 0%; } @font-face { font-family: 'DM Sans Fallback'; font-style: normal; font-weight: 400 600; src: local('Arial'), local('ArialMT'); size-adjust: 103.6579%; ascent-override: 95.6994%; descent-override: 29.9061%; line-gap-override: 0%; }