/* =====================================================================
ScoreMarch: self-hosted web fonts
---------------------------------------------------------------------
Source: Google Fonts (SIL Open Font License 1.1), woff2, split by
unicode-range so the browser downloads only the subsets a page uses.
Subsets: latin, latin-ext, cyrillic, cyrillic-ext. Anton has no
Cyrillic on Google Fonts, so the "Anton" family borrows Cyrillic
glyphs from Oswald (Copyright 2016 The Oswald Project Authors,
SIL Open Font License 1.1; github.com/googlefonts/OswaldFont):
a static wght 700 instance of the Google Fonts variable file,
cyrillic + cyrillic-ext subsets only, declared under "Anton" with
Cyrillic unicode-ranges and size-adjust/ascent/descent overrides
that match Anton's cap height and line box. Latin text never loads
these files; Russian pages (/ru/) load them only when Cyrillic is
set in --font-display.
Inter is variable (wght 400-700, trimmed from 100-900); Cormorant
Garamond (wght 300-700) and Montserrat (wght 100-900) are variable
files, so every requested weight shares one file per subset.
20 files, about 573 KB on disk. A Latin-only page loads at most
the 5 *-latin files (about 165 KB, typically 2-4 of them).
Recommended stacks (copy into :root in main.css):
--font-display: "Anton", "Anton Fallback", Impact, "Arial Narrow", sans-serif;
--font-serif: "Cormorant Garamond", "Cormorant Fallback", "Times New Roman", Georgia, serif;
--font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--font-label: "Montserrat", "Montserrat Fallback", "Segoe UI", Arial, sans-serif;
Roles: display = big caps and numerals (1450+, stats); serif =
editorial headings with italic accent words; sans = body and UI;
label = eyebrows, buttons, small caps (600, uppercase, tracked).
Preload only the two above-the-fold Latin files, in :
(If the hero headline is set in Anton, preload anton-400-latin.woff2
in place of the Cormorant file.)
The "* Fallback" faces are metric-matched local fonts (size-adjust and
ascent/descent/line-gap overrides computed with fontTools from the real
font files) so text keeps nearly the same size and line height while
the web fonts load. That keeps layout shift low with font-display: swap.
===================================================================== */
/* ---- Anton normal ---- */
/* latin-ext */
@font-face {
font-family: "Anton";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/anton-400-latin-ext.woff2") format("woff2");
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;
}
/* latin */
@font-face {
font-family: "Anton";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/anton-400-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;
}
/* ---- Anton: Cyrillic from Oswald 700 (OFL 1.1; see the header note) ----
size-adjust 106.1% = Anton cap height (0.859 em) / Oswald cap height (0.81 em).
The overrides are divided by size-adjust, so the line box equals Anton's
(ascent 1.176 em, descent 0.329 em): mixed Latin/Cyrillic lines keep their height
and baseline. Same unicode-ranges as the Cormorant Cyrillic faces below. */
/* cyrillic-ext */
@font-face {
font-family: "Anton";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/oswald-700-cyrillic-ext.woff2") format("woff2");
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
size-adjust: 106.1%;
ascent-override: 110.87%;
descent-override: 31.02%;
line-gap-override: 0%;
}
/* cyrillic */
@font-face {
font-family: "Anton";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/oswald-700-cyrillic.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
size-adjust: 106.1%;
ascent-override: 110.87%;
descent-override: 31.02%;
line-gap-override: 0%;
}
/* ---- Cormorant Garamond normal ---- */
/* cyrillic-ext */
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url("../fonts/cormorant-garamond-var-cyrillic-ext.woff2") format("woff2");
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url("../fonts/cormorant-garamond-var-cyrillic.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url("../fonts/cormorant-garamond-var-latin-ext.woff2") format("woff2");
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;
}
/* latin */
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url("../fonts/cormorant-garamond-var-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;
}
/* ---- Cormorant Garamond italic ---- */
/* cyrillic-ext */
@font-face {
font-family: "Cormorant Garamond";
font-style: italic;
font-weight: 500 600;
font-display: swap;
src: url("../fonts/cormorant-garamond-var-italic-cyrillic-ext.woff2") format("woff2");
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: "Cormorant Garamond";
font-style: italic;
font-weight: 500 600;
font-display: swap;
src: url("../fonts/cormorant-garamond-var-italic-cyrillic.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: "Cormorant Garamond";
font-style: italic;
font-weight: 500 600;
font-display: swap;
src: url("../fonts/cormorant-garamond-var-italic-latin-ext.woff2") format("woff2");
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;
}
/* latin */
@font-face {
font-family: "Cormorant Garamond";
font-style: italic;
font-weight: 500 600;
font-display: swap;
src: url("../fonts/cormorant-garamond-var-italic-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;
}
/* ---- Inter normal ---- */
/* cyrillic-ext */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("../fonts/inter-var-cyrillic-ext.woff2") format("woff2");
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("../fonts/inter-var-cyrillic.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("../fonts/inter-var-latin-ext.woff2") format("woff2");
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;
}
/* latin */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("../fonts/inter-var-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;
}
/* ---- Montserrat normal ---- */
/* cyrillic-ext */
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url("../fonts/montserrat-var-cyrillic-ext.woff2") format("woff2");
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url("../fonts/montserrat-var-cyrillic.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url("../fonts/montserrat-var-latin-ext.woff2") format("woff2");
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;
}
/* latin */
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url("../fonts/montserrat-var-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;
}
/* ---- Metric-matched fallbacks (local system fonts) ---- */
/* Impact matched to anton-400-latin */
@font-face {
font-family: "Anton Fallback";
font-style: normal;
font-weight: 400;
src: local("Impact");
size-adjust: 94.52%;
ascent-override: 124.44%;
descent-override: 34.82%;
line-gap-override: 0%;
}
/* Times New Roman matched to cormorant-garamond-var-latin @ wght 500 */
@font-face {
font-family: "Cormorant Fallback";
font-style: normal;
font-weight: 400 500;
src: local("Times New Roman"), local("TimesNewRomanPSMT");
size-adjust: 97.71%;
ascent-override: 94.56%;
descent-override: 29.37%;
line-gap-override: 0%;
}
/* Times New Roman Bold matched to cormorant-garamond-var-latin @ wght 600 */
@font-face {
font-family: "Cormorant Fallback";
font-style: normal;
font-weight: 600 700;
src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT");
size-adjust: 92.04%;
ascent-override: 100.4%;
descent-override: 31.18%;
line-gap-override: 0%;
}
/* Times New Roman Italic matched to cormorant-garamond-var-italic-latin @ wght 500 */
@font-face {
font-family: "Cormorant Fallback";
font-style: italic;
font-weight: 400 500;
src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT");
size-adjust: 88.18%;
ascent-override: 104.79%;
descent-override: 32.55%;
line-gap-override: 0%;
}
/* Times New Roman Bold Italic matched to cormorant-garamond-var-italic-latin @ wght 600 */
@font-face {
font-family: "Cormorant Fallback";
font-style: italic;
font-weight: 600 700;
src: local("Times New Roman Bold Italic"), local("TimesNewRomanPS-BoldItalicMT");
size-adjust: 86.75%;
ascent-override: 106.51%;
descent-override: 33.08%;
line-gap-override: 0%;
}
/* Arial matched to inter-var-latin @ wght 400 */
@font-face {
font-family: "Inter Fallback";
font-style: normal;
font-weight: 400 500;
src: local("Arial"), local("ArialMT");
size-adjust: 107.48%;
ascent-override: 90.14%;
descent-override: 22.44%;
line-gap-override: 0%;
}
/* Arial Bold matched to inter-var-latin @ wght 600 */
@font-face {
font-family: "Inter Fallback";
font-style: normal;
font-weight: 600 700;
src: local("Arial Bold"), local("Arial-BoldMT");
size-adjust: 101.3%;
ascent-override: 95.63%;
descent-override: 23.81%;
line-gap-override: 0%;
}
/* Arial matched to montserrat-var-latin @ wght 500 */
@font-face {
font-family: "Montserrat Fallback";
font-style: normal;
font-weight: 400 500;
src: local("Arial"), local("ArialMT");
size-adjust: 106.21%;
ascent-override: 91.14%;
descent-override: 23.63%;
line-gap-override: 0%;
}
/* Arial Bold matched to montserrat-var-latin @ wght 600 */
@font-face {
font-family: "Montserrat Fallback";
font-style: normal;
font-weight: 600 700;
src: local("Arial Bold"), local("Arial-BoldMT");
size-adjust: 106.14%;
ascent-override: 91.2%;
descent-override: 23.65%;
line-gap-override: 0%;
}