/* Chalet Vancouver - self-hosted type (canon §4, §4c) Familjen Grotesk (Familjen STHLM, OFL) roman + italic, variable wght 400-700 Red Hat Mono (MCKL, OFL) roman, variable wght 300-700 in the file, served as 400-600 Source: Google Fonts CSS2 API, fetched 2026-09-25 with a Chrome 128 UA (familjengrotesk v11, redhatmono v16). Only the latin + latin-ext subsets; unicode-range copied verbatim from Google, so a page in sk/cs/pl/hu pulls latin-ext only when it meets a letter from it. U+202F (narrow NBSP) is in neither font - use U+00A0. Preload (index.html ): familjen-grotesk-latin.woff2 + red-hat-mono-latin.woff2 only. Recommended stacks: sans: "Familjen Grotesk", "Familjen Grotesk Fallback", system-ui, -apple-system, "Segoe UI", sans-serif mono: "Red Hat Mono", "Red Hat Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, monospace */ :root { --font-sans: "Familjen Grotesk", "Familjen Grotesk Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Red Hat Mono", "Red Hat Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, monospace; } /* ---------- Familjen Grotesk - roman ---------- */ /* latin-ext */ @font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("familjen-grotesk-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; } /* latin */ @font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("familjen-grotesk-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; } /* ---------- Familjen Grotesk - italic (captions; not preloaded) ---------- */ /* latin-ext */ @font-face { font-family: "Familjen Grotesk"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("familjen-grotesk-italic-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; } /* latin */ @font-face { font-family: "Familjen Grotesk"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("familjen-grotesk-italic-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; } /* ---------- Red Hat Mono - roman ---------- */ /* latin-ext */ @font-face { font-family: "Red Hat Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("red-hat-mono-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; } /* latin */ @font-face { font-family: "Red Hat Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("red-hat-mono-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 (CLS 0 while the woff2 swap in) ---------- Computed 2026-09-25 with fontTools (scratchpad metrics.py) from the woff2 above vs the local system fonts. size-adjust = mean advance of the web font / mean advance of the fallback, both measured in em over a 479-character sk/cs/en/pl/hu sample (the master lines) - so a line breaks at the same word. Familjen 400: 0.4067 em vs Arial 0.4418 em -> 92.04 % (Helvetica 0.4424 -> 91.92 %, same face works) Familjen 600 (instanced): 0.4231 em vs Arial Bold 0.4708 em -> 89.86 % Familjen italic: 0.3927 em vs Arial Italic 0.4417 em -> 88.90 % Red Hat Mono: 0.6000 em vs Menlo 0.6021 em -> 99.66 % (Courier New 0.6001 -> 99.98 %) Calibrated in Chrome (headless, 2026-09-25): a sk / pl / hu test line with € ′ ″ „ “ set at 40 px measured 2496.3 / 2474.3 px (400), 2583.0 / 2550.5 px (600), 2427.0 / 2389.5 px (italic) web / fallback, because the web font applies its GPOS kerning and the fontTools sum does not; size-adjust was scaled by that ratio: 400 -> 92.86 %, 600 -> 91.01 %, italic -> 90.3 %. Red Hat Mono matched to 0.01 % (3552.0 / 3551.7 px). ascent / descent / line-gap-override = the web font's own vertical metrics divided by size-adjust (the overrides apply to the already size-adjusted fallback, so they must be scaled back): Familjen: USE_TYPO_METRICS set, ascender 1230 / descender -270 / gap 0 at 1200 upm = 1.025 / 0.225 / 0 em -> 400: 1.025 / 0.9286 = 110.38 %, 0.225 / 0.9286 = 24.23 % (600: 112.63 % / 24.72 %; italic: 113.52 % / 24.92 %) Red Hat Mono: 1018 / -305 / 0 at 1000 upm -> 1.018 / 0.9966 = 102.15 %, 0.305 / 0.9966 = 30.60 % Result: line box of the fallback = the web font's (50.0 px at 40 px for both, 53.0 px mono), CLS 0. Arimo / Liberation are metric-compatible with Arial and Courier New (Linux, ChromeOS), so the same numbers hold. */ @font-face { font-family: "Familjen Grotesk Fallback"; font-style: normal; font-weight: 400 500; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Arimo"), local("Liberation Sans"); size-adjust: 92.86%; ascent-override: 110.38%; descent-override: 24.23%; line-gap-override: 0%; } @font-face { font-family: "Familjen Grotesk Fallback"; font-style: normal; font-weight: 600 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Arimo Bold"), local("Liberation Sans Bold"); size-adjust: 91.01%; ascent-override: 112.63%; descent-override: 24.72%; line-gap-override: 0%; } @font-face { font-family: "Familjen Grotesk Fallback"; font-style: italic; font-weight: 400 700; src: local("Arial Italic"), local("Arial-ItalicMT"), local("Helvetica Oblique"), local("Helvetica-Oblique"), local("Arimo Italic"), local("Liberation Sans Italic"); size-adjust: 90.3%; ascent-override: 113.52%; descent-override: 24.92%; line-gap-override: 0%; } @font-face { font-family: "Red Hat Mono Fallback"; font-style: normal; font-weight: 400 600; src: local("Menlo"), local("Menlo-Regular"), local("Courier New"), local("CourierNewPSMT"), local("Cousine"), local("Liberation Mono"); size-adjust: 99.66%; ascent-override: 102.15%; descent-override: 30.60%; line-gap-override: 0%; }