/* ─────────────────────────────────────────────────────────────
SELF-HOSTED FONTS — kills the font flash (FOUT/FOIT).
GENERATED by scripts/localize-fonts.mjs — do not hand-edit.
Faces: shared-context/fonts/ (latin subset, Google Fonts CSS2 API).
A Google Fonts is a two-hop waterfall: fetch the CSS from
fonts.googleapis.com, parse it, and only THEN discover the woff2
URLs on fonts.gstatic.com. Measured live: CSS done at 172ms, fonts
not started until 678ms. With display=swap that half-second gap is
a guaranteed visible swap. Serving from our own origin plus a
in the head collapses it to one hop that starts
at parse time.
USAGE — in each page , BEFORE this stylesheet, preload only
the faces that page paints above the fold:
───────────────────────────────────────────────────────────── */
/* ── Barlow Condensed ── */
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/barlow-condensed-400.woff2') format('woff2');
}
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/fonts/barlow-condensed-500.woff2') format('woff2');
}
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/barlow-condensed-700.woff2') format('woff2');
}
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('/fonts/barlow-condensed-800.woff2') format('woff2');
}
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url('/fonts/barlow-condensed-900.woff2') format('woff2');
}
/* ── Cormorant Garamond ── */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('/fonts/cormorant-garamond-var.woff2') format('woff2');
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300 700;
font-display: swap;
src: url('/fonts/cormorant-garamond-var-italic.woff2') format('woff2');
}
/* ── DM Mono ── */
@font-face {
font-family: 'DM Mono';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('/fonts/dm-mono-300.woff2') format('woff2');
}
@font-face {
font-family: 'DM Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/dm-mono-400.woff2') format('woff2');
}
@font-face {
font-family: 'DM Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/fonts/dm-mono-500.woff2') format('woff2');
}
/* ── DM Sans ── */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 100 1000;
font-display: swap;
src: url('/fonts/dm-sans-var.woff2') format('woff2');
}
@font-face {
font-family: 'DM Sans';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url('/fonts/dm-sans-300-italic.woff2') format('woff2');
}
@font-face {
font-family: 'DM Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('/fonts/dm-sans-400-italic.woff2') format('woff2');
}
@font-face {
font-family: 'DM Sans';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url('/fonts/dm-sans-500-italic.woff2') format('woff2');
}
/* ─────────────────────────────────────────────────────────────
METRIC-MATCHED FALLBACKS
Each wraps a system font and re-shapes its metrics to match ours,
so if a webfont is still in flight the text occupies the SAME space
and any residual swap is invisible instead of a reflow.
size-adjust = avgCharWidth(webfont) / avgCharWidth(system font),
both measured off the real font tables with fontTools against the
actual macOS Arial / Georgia / Courier New (next/font's method).
───────────────────────────────────────────────────────────── */
@font-face {
font-family: 'Barlow Condensed Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
size-adjust: 77.42%;
ascent-override: 129.16%;
descent-override: 25.83%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Cormorant Fallback';
src: local('Georgia'), local('Times New Roman'), local('Liberation Serif');
size-adjust: 88.21%;
ascent-override: 104.75%;
descent-override: 32.53%;
line-gap-override: 0%;
}
@font-face {
font-family: 'DM Mono Fallback';
src: local('Courier New'), local('Liberation Mono');
size-adjust: 99.98%;
ascent-override: 99.22%;
descent-override: 31.01%;
line-gap-override: 0%;
}
@font-face {
font-family: 'DM Sans Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
size-adjust: 105.79%;
ascent-override: 93.77%;
descent-override: 29.3%;
line-gap-override: 0%;
}
/* Canonical stacks — prefer these over hand-written font-family rules
so the metric-matched fallback is never skipped. */
:root {
--font-display: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
--font-body: 'DM Sans', 'DM Sans Fallback', -apple-system, Arial, sans-serif;
--font-mono: 'DM Mono', 'DM Mono Fallback', ui-monospace, Menlo, monospace;
--font-condensed: 'Barlow Condensed', 'Barlow Condensed Fallback', Arial, sans-serif;
}