/* fonts.css — self-hosted latin-subset variable faces + metric-matched fallbacks. Loaded first so tokens/base can reference the families. font-display: swap on every real face; the fallback faces below are size-adjusted so the swap does not shift layout (target CLS ~= 0). Fraunces/Newsreader are preloaded in ; Spline is not (numerals tolerate a frame of fallback since they are tabular either way). */ /* ---- Fraunces (display serif) ---- */ @font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-var.woff2") format("woff2-variations"); font-weight: 100 900; font-stretch: 100%; font-style: normal; font-display: swap; } /* Italic faces are weight-instanced to 400–500 (varLib.instancer; opsz kept full): the site only sets italics at 400–460 (+ strong 500), and the trim saves ~65KB across the pair. */ @font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-italic-var.woff2") format("woff2-variations"); font-weight: 400 500; font-stretch: 100%; font-style: italic; font-display: swap; } /* ---- Newsreader (reading serif) ---- */ @font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-var.woff2") format("woff2-variations"); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-italic-var.woff2") format("woff2-variations"); font-weight: 400 500; font-style: italic; font-display: swap; } /* ---- Spline Sans Mono (every numeral, label, equation) ---- */ @font-face { font-family: "Spline Sans Mono"; src: url("/fonts/spline-sans-mono-var.woff2") format("woff2-variations"); font-weight: 300 700; font-style: normal; font-display: swap; } /* ---- Metric-matched fallbacks (hold layout during swap) ---- Overrides tuned so the substitute advance/cap-height tracks the real face; the loaded font then swaps in with near-zero reflow. */ @font-face { font-family: "Fraunces Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 105%; ascent-override: 92%; descent-override: 26%; line-gap-override: 0%; } @font-face { font-family: "Newsreader Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 103%; ascent-override: 93%; descent-override: 24%; line-gap-override: 0%; } @font-face { font-family: "Spline Fallback"; src: local("Menlo"), local("Consolas"), local("Courier New"); size-adjust: 102%; ascent-override: 88%; descent-override: 22%; line-gap-override: 0%; }