/* Self-hosted webfonts — replaces the Google Fonts s
(fonts.googleapis.com / fonts.gstatic.com) that were render-blocking FCP/LCP.
Files live in /assets/fonts, SIL OFL, latin subset only (page is English-only,
glyphs used are ASCII + general punctuation, both inside Google's "latin"
unicode-range below).
Each real family also gets a metric-matched " Fallback" face so the
font-display: swap flash doesn't reflow layout (the CLS fix). Order of
operations for the math, per the CSS Fonts spec: size-adjust scales BOTH
the fallback's advance widths AND its ascent/descent/line-gap-override
percentages, so the override values below are the font's raw metric
percentage divided by the size-adjust ratio — not the raw percentage
itself. Verified against the worked reference example in
_design-library/patterns/metric-matched-fallback/NOTES.md (dividing its
published ascent-override by its size-adjust reproduces a suspiciously
clean 100.00%/20.00%/20.00% raw metric set, confirming the direction).
All values below are computed, not guessed:
- ascent/descent/line-gap raw %: read from each woff2's OS/2
sTypoAscender/sTypoDescender/sTypoLineGap ÷ unitsPerEm via fontTools
(OS/2.fsSelection USE_TYPO_METRICS bit is set on all three fonts, so
browsers read the OS/2 typo fields, not hhea).
- size-adjust: measured live in Chromium (Playwright) by rendering a
representative string in the real self-hosted font vs. the
local("Segoe UI") fallback stack at the same weight/size and comparing
getBoundingClientRect().width. size-adjust = real_width / fallback_width. */
/* ---------- Space Grotesk (display: h1/h2/h3, brand, buttons) ---------- */
/* Variable font (wght 300–700); Google's CSS2 API serves ONE latin woff2 for
weights 500/600/700 and pins the instance via the font-weight descriptor —
confirmed via fontTools (fvar axis wght 300–700, named instances at
300/400/500/700) rather than downloading 3 separate files. */
@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/space-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;
}
@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/space-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;
}
@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/space-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;
}
/* raw ascent/descent/line-gap: 984/292/0 ÷ 1000 unitsPerEm = 98.40% / 29.20% / 0.00%
size-adjust: "Software that keeps you on course." @700/100px — real 1725.41px
vs local("Segoe UI") 1651.67px → 1725.41/1651.67 = 104.46%
overrides = raw ÷ 1.0446: 98.40→94.19%, 29.20→27.95%, 0→0.00% */
@font-face {
font-family: "Space Grotesk Fallback";
src: local("Segoe UI"), local("Arial");
size-adjust: 104.46%;
ascent-override: 94.19%;
descent-override: 27.95%;
line-gap-override: 0%;
}
/* ---------- IBM Plex Sans (body copy) ---------- */
/* Also variable (wght 100–700); one latin woff2 serves weights 400 and 500. */
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/ibm-plex-sans-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;
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/ibm-plex-sans-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;
}
/* raw ascent/descent/line-gap: 1025/275/0 ÷ 1000 = 102.50% / 27.50% / 0.00%
size-adjust: "Skeg builds small, sharp tools that help things run." @400/100px —
real 2257.00px vs local("Segoe UI") 2218.42px → 2257.00/2218.42 = 101.74%
overrides = raw ÷ 1.0174: 102.50→100.75%, 27.50→27.03%, 0→0.00% */
@font-face {
font-family: "IBM Plex Sans Fallback";
src: local("Segoe UI"), local("Arial");
size-adjust: 101.74%;
ascent-override: 100.75%;
descent-override: 27.03%;
line-gap-override: 0%;
}
/* ---------- IBM Plex Mono (eyebrow labels) ---------- */
/* Static font, single weight 500 — one file, no shared-URL trick needed. */
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/ibm-plex-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;
}
/* raw ascent/descent/line-gap: 1025/275/0 ÷ 1000 = 102.50% / 27.50% / 0.00%
size-adjust: "INDEPENDENT SOFTWARE STUDIO" @500/100px — real 1620.00px vs
local("Segoe UI") 1595.52px → 1620.00/1595.52 = 101.53%
overrides = raw ÷ 1.0153: 102.50→100.95%, 27.50→27.08%, 0→0.00% */
@font-face {
font-family: "IBM Plex Mono Fallback";
src: local("Segoe UI"), local("Arial");
size-adjust: 101.53%;
ascent-override: 100.95%;
descent-override: 27.08%;
line-gap-override: 0%;
}
:root {
--display: "Space Grotesk", "Space Grotesk Fallback", "Segoe UI", system-ui, sans-serif;
--sans: "IBM Plex Sans", "IBM Plex Sans Fallback", "Segoe UI", system-ui, sans-serif;
--mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, "Cascadia Mono", monospace;
}