/* ─────────────────────────────────────────────────────────────
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');
}
/* ── Bebas Neue ── */
@font-face {
font-family: 'Bebas Neue';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/bebas-neue-400.woff2') format('woff2');
}
/* ── Bodoni Moda ── */
@font-face {
font-family: 'Bodoni Moda';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url('/fonts/bodoni-moda-var.woff2') format('woff2');
}
@font-face {
font-family: 'Bodoni Moda';
font-style: italic;
font-weight: 400 900;
font-display: swap;
src: url('/fonts/bodoni-moda-var-italic.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');
}
/* ── Fraunces ── */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/fraunces-var.woff2') format('woff2');
}
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/fraunces-var-italic.woff2') format('woff2');
}
/* ── Instrument Sans ── */
@font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/fonts/instrument-sans-var.woff2') format('woff2');
}
/* ── Instrument Serif ── */
@font-face {
font-family: 'Instrument Serif';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/instrument-serif-400.woff2') format('woff2');
}
@font-face {
font-family: 'Instrument Serif';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('/fonts/instrument-serif-400-italic.woff2') format('woff2');
}
/* ── Inter ── */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/inter-var.woff2') format('woff2');
}
/* ── Jost ── */
@font-face {
font-family: 'Jost';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/jost-var.woff2') format('woff2');
}
/* ── Libre Baskerville ── */
@font-face {
font-family: 'Libre Baskerville';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/libre-baskerville-400.woff2') format('woff2');
}
@font-face {
font-family: 'Libre Baskerville';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('/fonts/libre-baskerville-400-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Libre Baskerville';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/libre-baskerville-700.woff2') format('woff2');
}
/* ── Lora ── */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/fonts/lora-var.woff2') format('woff2');
}
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 400 700;
font-display: swap;
src: url('/fonts/lora-var-italic.woff2') format('woff2');
}
/* ── Merriweather ── */
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url('/fonts/merriweather-var.woff2') format('woff2');
}
@font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 300 900;
font-display: swap;
src: url('/fonts/merriweather-var-italic.woff2') format('woff2');
}
/* ── Mulish ── */
@font-face {
font-family: 'Mulish';
font-style: normal;
font-weight: 200 1000;
font-display: swap;
src: url('/fonts/mulish-var.woff2') format('woff2');
}
@font-face {
font-family: 'Mulish';
font-style: italic;
font-weight: 200 1000;
font-display: swap;
src: url('/fonts/mulish-var-italic.woff2') format('woff2');
}
/* ── Nunito ── */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 200 1000;
font-display: swap;
src: url('/fonts/nunito-var.woff2') format('woff2');
}
/* ── Oswald ── */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 200 700;
font-display: swap;
src: url('/fonts/oswald-var.woff2') format('woff2');
}
/* ── Playfair Display ── */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url('/fonts/playfair-display-var.woff2') format('woff2');
}
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 400 900;
font-display: swap;
src: url('/fonts/playfair-display-var-italic.woff2') format('woff2');
}
/* ── Plus Jakarta Sans ── */
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url('/fonts/plus-jakarta-sans-var.woff2') format('woff2');
}
/* ── Raleway ── */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/raleway-var.woff2') format('woff2');
}
@font-face {
font-family: 'Raleway';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/raleway-var-italic.woff2') format('woff2');
}
/* ── Source Sans 3 ── */
@font-face {
font-family: 'Source Sans 3';
font-style: normal;
font-weight: 200 900;
font-display: swap;
src: url('/fonts/source-sans-3-var.woff2') format('woff2');
}
/* ── Space Grotesk ── */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('/fonts/space-grotesk-var.woff2') format('woff2');
}
/* ── Tenor Sans ── */
@font-face {
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/tenor-sans-400.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: 'Bebas Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
size-adjust: 77.8%;
ascent-override: 115.68%;
descent-override: 38.56%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Bodoni Fallback';
src: local('Georgia'), local('Times New Roman'), local('Liberation Serif');
size-adjust: 104.91%;
ascent-override: 107.23%;
descent-override: 38.13%;
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%;
}
@font-face {
font-family: 'Fraunces Fallback';
src: local('Georgia'), local('Times New Roman'), local('Liberation Serif');
size-adjust: 116.84%;
ascent-override: 83.71%;
descent-override: 21.83%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Instrument Sans Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
size-adjust: 103.21%;
ascent-override: 93.98%;
descent-override: 24.22%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Instrument Serif Fallback';
src: local('Georgia'), local('Times New Roman'), local('Liberation Serif');
size-adjust: 76.91%;
ascent-override: 128.72%;
descent-override: 40.31%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Inter Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
size-adjust: 107.47%;
ascent-override: 90.14%;
descent-override: 22.45%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Jost Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
size-adjust: 95.71%;
ascent-override: 111.8%;
descent-override: 39.18%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Libre Baskerville Fallback';
src: local('Georgia'), local('Times New Roman'), local('Liberation Serif');
size-adjust: 116.62%;
ascent-override: 83.17%;
descent-override: 23.15%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Lora Fallback';
src: local('Georgia'), local('Times New Roman'), local('Liberation Serif');
size-adjust: 106.1%;
ascent-override: 94.81%;
descent-override: 25.82%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Merriweather Fallback';
src: local('Georgia'), local('Times New Roman'), local('Liberation Serif');
size-adjust: 107.59%;
ascent-override: 91.46%;
descent-override: 25.37%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Mulish Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
size-adjust: 101.46%;
ascent-override: 99.06%;
descent-override: 24.64%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Nunito Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
size-adjust: 98.27%;
ascent-override: 102.88%;
descent-override: 35.92%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Oswald Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
size-adjust: 81.96%;
ascent-override: 145.55%;
descent-override: 35.26%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Playfair Fallback';
src: local('Georgia'), local('Times New Roman'), local('Liberation Serif');
size-adjust: 102.36%;
ascent-override: 105.71%;
descent-override: 24.52%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Plus Jakarta Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
size-adjust: 106%;
ascent-override: 97.92%;
descent-override: 20.94%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Raleway Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
size-adjust: 101.65%;
ascent-override: 92.48%;
descent-override: 23.02%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Source Sans Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
size-adjust: 90.21%;
ascent-override: 113.51%;
descent-override: 44.34%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Space Grotesk Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
size-adjust: 111.32%;
ascent-override: 88.4%;
descent-override: 26.23%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Tenor Sans Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
size-adjust: 109.54%;
ascent-override: 83.98%;
descent-override: 22.82%;
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;
}