/* The two faces DESIGN.md § Typography names, served from this origin. They were two third-party stylesheets in until now — api.fontshare.com and fonts.googleapis.com — each one a DNS lookup, a TLS handshake and a round trip before a single glyph could be asked for, and both of them render-blocking on every page (~800ms each, measured with Lighthouse on mobile). Self-hosted, the @font-face rules arrive with kg.css and the woff2 files come down the connection the HTML already used. The metric-matched fallbacks below are the other half of it. With plain Arial standing in, every string on the page re-measured when the real faces arrived: the wordmark went 154.5px → 144.3px, the header's nav links went the other way and wrapped to a second row, and
dropped 56px — 0.195 to 0.204 of layout shift on every page at 390px, measured in Chrome at that width with the woff2 held back 1.2s. `size-adjust` scales Arial's glyphs to the width the real face's occupy, per family and per weight, so the swap changes the letterforms and nothing else. Measured again the same way afterwards: 0.000 on all three. The percentages are measured, not guessed, and they are measured against the text this site actually sets — the two Fallback families were tuned by comparing advance widths over the site's own Spanish UI strings, because the DM Sans / Arial ratio runs about 1.03 over Spanish prose and about 1.00 over an alphabet-and-digits sample, and the wrap turns on the difference. Re-measure them if the faces or the weights change. The URLs are relative, so they resolve against wherever this file is mounted. */ /* --- Cabinet Grotesk (ITF Free Font Licence, fonts/LICENCE-cabinet-grotesk.txt) */ @font-face { font-family: "Cabinet Grotesk"; src: url("fonts/cabinet-grotesk-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Cabinet Grotesk"; src: url("fonts/cabinet-grotesk-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Cabinet Grotesk"; src: url("fonts/cabinet-grotesk-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } /* Arial, wearing Cabinet Grotesk's metrics — one face per weight, because one ratio does not fit all three, and because `local()` names a face and not a family: the 500 rule has to stand Arial regular in and the 700 and 800 rules Arial Bold, or the fallback is drawn at the wrong weight as well as measured against the wrong advance. Against those, Cabinet's 500 sets the wordmark string at 97.1%, its 700 at 91.8% and its 800 at 93.6%. The ascent and descent overrides are the real face's own (0.87em and 0.28em), each divided by the size-adjust that then scales it, so the fallback's line box is the same height as well as the same width. Nothing is downloaded for these — they are a font already on the machine — and where none of the names is installed the face does not load at all and the stack falls through to the next name in it. */ @font-face { font-family: "Cabinet Grotesk Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Nimbus Sans"); font-weight: 500; font-style: normal; size-adjust: 97.12%; ascent-override: 89.58%; descent-override: 28.83%; line-gap-override: 0%; } @font-face { font-family: "Cabinet Grotesk Fallback"; src: local("Arial Bold"), local("Helvetica Bold"), local("Liberation Sans Bold"), local("Nimbus Sans Bold"); font-weight: 700; font-style: normal; size-adjust: 91.83%; ascent-override: 94.74%; descent-override: 30.49%; line-gap-override: 0%; } @font-face { font-family: "Cabinet Grotesk Fallback"; src: local("Arial Bold"), local("Helvetica Bold"), local("Liberation Sans Bold"), local("Nimbus Sans Bold"); font-weight: 800; font-style: normal; size-adjust: 93.60%; ascent-override: 92.94%; descent-override: 29.91%; line-gap-override: 0%; } /* The same treatment for the body face, and it is the one that was doing the damage. The wordmark's 10px was never what moved
: the header's nav sits beside it in DM Sans, and DM Sans is *wider* than Arial, so when it arrived the two links no longer fitted on one row with the wordmark, wrapped, and dropped everything below them 56px. Metric-matched, the fallback wraps where the real face wraps and nothing below the header moves. Weight 600 stands Arial Bold in for the same reason as Cabinet's 700 and 800: that is the face a browser picks for the family at that weight. */ @font-face { font-family: "DM Sans Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Nimbus Sans"); font-weight: 400; font-style: normal; size-adjust: 103.13%; ascent-override: 96.00%; descent-override: 30.06%; line-gap-override: 0%; } @font-face { font-family: "DM Sans Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Nimbus Sans"); font-weight: 500; font-style: normal; size-adjust: 105.00%; ascent-override: 94.29%; descent-override: 29.52%; line-gap-override: 0%; } @font-face { font-family: "DM Sans Fallback"; src: local("Arial Bold"), local("Helvetica Bold"), local("Liberation Sans Bold"), local("Nimbus Sans Bold"); font-weight: 600; font-style: normal; size-adjust: 100.42%; ascent-override: 98.59%; descent-override: 30.87%; line-gap-override: 0%; } /* --- DM Sans (SIL Open Font Licence 1.1, fonts/LICENCE-dm-sans.txt) One variable file per unicode range, as Google serves it: the 400, 500 and 600 rules below all point at the same woff2 and differ only in the weight they instantiate it at. latin-ext is a separate file behind a separate range, so a page of Spanish never downloads it. */ @font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-latin.woff2") format("woff2"); font-weight: 400; 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; } @font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; 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; } @font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-latin.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; } @font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-latin-ext.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; 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; } @font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-latin.woff2") format("woff2"); font-weight: 600; 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; } @font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-latin-ext.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; 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; }