/* =========================================================================== SCA V2 · §37 SELF-HOSTED WEBFONTS --------------------------------------------------------------------------- Doel uit het design-contract: NUL externe hosts. Deze file vervangt de Google-Fonts-koppeling volledig. Verwijder in dezelfde commit uit alle 18 pagina's de preconnect naar fonts.googleapis.com, de preconnect naar fonts.gstatic.com, de render-blokkerende Google-stylesheet met 9 gewichten en de dode preconnect naar api.scagency.nl. Half doen maakt het meetbaar slechter (extra DNS/TLS zonder opbrengst). BESTANDEN · 3 families, 3 bestanden, 93.484 bytes = 91,3 KB totaal. Budget uit het contract is 95 KB. Ruimte over: 3,7 KB. assets/fonts/SchibstedGrotesk-var.woff2 43.400 B wght 400-900 variabel assets/fonts/Inter-var.woff2 41.208 B wght 300-800 variabel assets/fonts/GeistMono-500.woff2 8.876 B wght 500 statisch Bron: github.com/google/fonts (officiele OFL-repo), geinstantieerd met fontTools 4.63 (alleen de wght-as behouden; Inter's opsz-as is gepind op de default 14) en gesubset naar de latin-range. OFL 1.1-teksten staan naast de woff2's in assets/fonts/ (OFL-*.txt) · dat is de enige licentieverplichting. SUBSET · Google's "latin"-range, NIET latin-ext. Reden: latin+latin-ext komt uit op 166 KB, 75% over het harde budget van 95 KB, en het contract schrijft voor dat bij overschrijding de snelheid NOOIT sneuvelt. De latin-range dekt elk codepoint dat het contract als VERPLICHT noemt: U+00B7 (de middenpunt- separator, sitewide in gebruik), U+2212 (het echte minteken in "-32%"), U+20AC (euro) en alle Nederlandse diakrieten (e-acute, e-trema, i-trema, o-trema, u-trema). Alles daarbuiten valt via unicode-range netjes terug op de systeemfont in plaats van de download te vergroten. LAADVOLGORDE · KOPPEL DEZE FILE NA styles/system.css. De tokens hieronder staan bewust op `html:root` (specificiteit 0-1-1) en niet op `:root` (0-1-0), zodat ze de definities in system.css §1 regel 62-63 winnen ONGEACHT de volgorde waarin de twee stylesheets staan. Een agent die ze omdraait breekt de typografie dus niet stil. PRELOAD · exact twee, in de van elke pagina, VOOR de stylesheets: Schibsted draagt de H1 (het LCP-element), Inter de lead direct eronder. Geist Mono krijgt GEEN preload: die verschijnt pas onder de vouw. =========================================================================== */ /* --------------------------------------------------------------------------- 1 · DE WEBFONTS font-display:swap is verplicht uit het contract. De CLS die swap normaal oplevert wordt in blok 2 weggenomen met metric-matched fallbacks. --------------------------------------------------------------------------- */ /* DISPLAY · koppen, knoppen, KPI-cijfers */ @font-face { font-family: "Schibsted Grotesk"; src: url("../assets/fonts/SchibstedGrotesk-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; 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; } /* BODY · alle lopende tekst */ @font-face { font-family: "Inter"; src: url("../assets/fonts/Inter-var.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; 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; } /* MONO · alle systeemdata: tijdstempels, kolomkoppen, statuschips, specregels */ @font-face { font-family: "Geist Mono"; src: url("../assets/fonts/GeistMono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; 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; } /* --------------------------------------------------------------------------- 2 · METRIC-MATCHED FALLBACKS (contract: verplicht bij font-display:swap) Elke familie krijgt een schaduwfamilie die naar een lokale systeemfont wijst en met size-adjust / ascent-override / descent-override exact dezelfde regelhoogte en gemiddelde tekenbreedte krijgt als de echte webfont. Daardoor verspringt er tijdens de swap niets en is de CLS-bijdrage van de fontwissel nul. Zonder deze blokken levert font-display:swap juist de layout shift op die we willen voorkomen. De percentages zijn NIET geschat maar gemeten met fontTools op de daadwerkelijk gebouwde woff2's tegenover de echte systeemfonts: size-adjust = gemiddelde tekenbreedte webfont / die van de fallback, gemeten over een representatieve Nederlandse zin ascent-override = (typo ascender / em) van de webfont, gedeeld door size-adjust descent-override = idem voor de descender Alle drie de webfonts zetten USE_TYPO_METRICS (fsSelection bit 7), dus de typo-metrics zijn wat de browser daadwerkelijk rendert. line-gap is bij alle drie 0, dus line-gap-override is 0%. Gemeten waarden: Arial asc .9053 desc .2119 gap .0327 avg-breedte .4728 Consolas asc .7427 desc .2573 gap .1709 avg-breedte .5498 Helvetica en Helvetica Neue zijn metrisch identiek aan Arial en staan daarom als extra local() in dezelfde regel. Bestaat geen van de local()-bronnen (veel Linux- en Android-toestellen), dan faalt deze familie stil en schuift de browser door naar de volgende in de stack. Dat is precies het gewenste gedrag. --------------------------------------------------------------------------- */ @font-face { font-family: "Schibsted Grotesk Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 109.14%; ascent-override: 89.48%; descent-override: 23.62%; line-gap-override: 0%; } @font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 106.38%; ascent-override: 91.07%; descent-override: 22.67%; line-gap-override: 0%; } @font-face { font-family: "Geist Mono Fallback"; src: local("Consolas"), local("Menlo"); size-adjust: 109.13%; ascent-override: 92.09%; descent-override: 27.03%; line-gap-override: 0%; } /* --------------------------------------------------------------------------- 3 · DE TOKENS Dit is de plek waar het contract --font-display van "Space Grotesk" naar "Schibsted Grotesk" omzet. system.css §1 regel 62-63 en §36 regel 225 mogen ongewijzigd blijven staan: `html:root` wint hier altijd van `:root`. --font-mono stond al klaar met "Geist Mono" vooraan; hier komt alleen de metric-matched fallback er tussen. --------------------------------------------------------------------------- */ html:root { --font-body: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-display: "Schibsted Grotesk", "Schibsted Grotesk Fallback", var(--font-body); --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace; } /* --------------------------------------------------------------------------- 4 · CIJFERDISCIPLINE · BEWUST NIET GLOBAAL tabular-nums hoort op de cijfers zelf, NOOIT op html of :root. In de browser nagemeten: op root maakt tnum ook de PUNT en de KOMMA tabelbreed, want die horen bij een cijferreeks als 1.234,56. In Schibsted Grotesk op 80px werd de punt daardoor 48px in plaats van 23px, met een zichtbaar gat voor elke punt in de hero-H1 en in elke alinea op de hele site. De juiste plek staat in system.css bij de .stat-selector, gescoped op de elementen die een veranderend cijfer dragen. Nieuwe cijfercomponenten voeg je daar toe. Zet dit hier niet terug: fonts.css laadt NA system.css en wint dus stil van elke reparatie daar. --------------------------------------------------------------------------- */