/* ==========================================================================
MKE Web Labs self-hosted webfonts
Fraunces (display, variable: opsz + wght) / Geist Sans (body, variable: wght)
Both SIL Open Font License 1.1. See README.md and OFL-*.txt in this folder.
PRELOAD TAGS: paste these into , as early as possible, before this
stylesheet. crossorigin is REQUIRED even though the files are same-origin.
(Site is served from the repo root, so /assets/fonts/... resolves from any
page depth. If you ever serve the site from a subdirectory, switch these and
the src: url() values below to ./assets/fonts/... relative to the page.)
========================================================================== */
/* --------------------------------------------------------------------------
1. DISPLAY: Fraunces variable
Axes shipped: opsz 9..144, wght 400..700
SOFT pinned to 0 and WONK pinned to 0 at build time, so no
font-variation-settings is needed to get the crisp, non-wonky forms.
Optical sizing is automatic: browsers set opsz from the used font-size
whenever font-optical-sizing is auto (the default).
Subset: latin only. Fraunces has NO tabular figures, use Geist for numbers.
-------------------------------------------------------------------------- */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/assets/fonts/fraunces-var-latin.woff2') format('woff2') tech(variations),
url('/assets/fonts/fraunces-var-latin.woff2') format('woff2-variations'),
url('/assets/fonts/fraunces-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;
}
/* --------------------------------------------------------------------------
2. BODY: Geist Sans variable
Axis shipped: wght 400..700. Subset: latin + latin-ext.
Tabular numerals present as the OpenType feature tag `tnum`
(CSS: font-variant-numeric: tabular-nums). All ten digits become 600/1000em.
-------------------------------------------------------------------------- */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/assets/fonts/geist-var-latin-ext.woff2') format('woff2') tech(variations),
url('/assets/fonts/geist-var-latin-ext.woff2') format('woff2-variations'),
url('/assets/fonts/geist-var-latin-ext.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF, U+0304, U+0308, U+0329, U+0131, U+0152-0153,
U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+2020,
U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215,
U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}
/* --------------------------------------------------------------------------
3. METRIC-MATCHED FALLBACKS (CLS control)
Numbers below are MEASURED from the shipped .woff2 files and from the real
C:\Windows\Fonts\georgia.ttf and arial.ttf, not guessed.
Method:
avgN = advance width of a frequency-weighted English character sample
(a..z at corpus frequency = 81% of the stream, space = 19%),
divided by unitsPerEm.
size-adjust = avgN(webfont) / avgN(fallback)
ascent-override = ascentN(webfont) / size-adjust
descent-override = descentN(webfont) / size-adjust
line-gap-override = lineGapN(webfont) / size-adjust
Both webfonts set the USE_TYPO_METRICS flag, so the OS/2 sTypo* values are
the authority and are what is normalized above.
Measured inputs:
Georgia upem 2048 avgN 0.4331
Arial upem 2048 avgN 0.4354
Fraunces upem 2000 ascN 0.9780 descN 0.2550 gapN 0 avgN 0.4687 (opsz 48, wght 700)
Geist upem 1000 ascN 1.0050 descN 0.2950 gapN 0 avgN 0.4592 (wght 400)
Fraunces is tuned at opsz 48 / wght 700 because that is where it is used:
headings. Its advance widths move with the opsz axis, so a single fallback
cannot be exact at every size; at opsz 9 / wght 400 the ideal size-adjust
would be 106.20% instead of 108.23%, a 1.9% spread.
-------------------------------------------------------------------------- */
@font-face {
font-family: 'Fraunces Fallback';
src: local('Georgia'), local('Times New Roman'), local('Times');
size-adjust: 108.23%;
ascent-override: 90.36%;
descent-override: 23.56%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Geist Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Liberation Sans');
size-adjust: 105.45%;
ascent-override: 95.31%;
descent-override: 27.98%;
line-gap-override: 0%;
}
/* --------------------------------------------------------------------------
4. TOKENS
-------------------------------------------------------------------------- */
:root {
--font-display: 'Fraunces', 'Fraunces Fallback', Georgia, 'Times New Roman', Times, serif;
--font-body: 'Geist', 'Geist Fallback', Arial, 'Helvetica Neue', Helvetica, system-ui, sans-serif;
}
/* --------------------------------------------------------------------------
5. OPTIONAL HELPERS
-------------------------------------------------------------------------- */
/* Prices, phone numbers, any column of figures that must align vertically.
Maps to the OpenType `tnum` feature. Geist only, Fraunces has no tnum. */
.tabular-nums {
font-family: var(--font-body);
font-variant-numeric: tabular-nums;
}
/* Let the browser drive Fraunces optical sizing from font-size. This is the
browser default; declare it only if some reset has turned it off. */
.display {
font-family: var(--font-display);
font-optical-sizing: auto;
}
/* Escape hatch: force a specific optical size, for example a large display
cut used at a small pixel size for a caption or an eyebrow label. */
.display--opsz-144 { font-variation-settings: 'opsz' 144; }
.display--opsz-9 { font-variation-settings: 'opsz' 9; }