/* ───────────────────────────────────────────────────────────────────── fonts.css — self-hosted variable fonts All three are SIL Open Font License — free for commercial use, redistributable, self-hostable. Download .woff2 files from https://fonts.google.com or https://fontsource.org and drop them in /fonts/ alongside this CSS. File names below match the Fontsource convention. Adjust paths for your Eleventy build (e.g. /assets/fonts/). ───────────────────────────────────────────────────────────────────── */ /* ── Newsreader — variable font with optical sizing (6pt → 72pt) ─────── Two files: upright and italic. The opsz axis is THE reason to use this font on a long-form blog — body sizes get more open metrics, display sizes get tighter spacing automatically. */ @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/newsreader-variable.woff2") format("woff2-variations"), url("/fonts/newsreader-variable.woff2") format("woff2"); /* The unicode-range below excludes the Cyrillic + Vietnamese blocks; remove if you serve content in those scripts. */ unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+2190-21FF; } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("/fonts/newsreader-italic-variable.woff2") format("woff2-variations"), url("/fonts/newsreader-italic-variable.woff2") format("woff2"); unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+2190-21FF; } /* ── DM Sans — variable, with optical sizing too ────────────────────── Used for UI labels, nav, metadata. Body sizes never. */ @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("/fonts/dm-sans-variable.woff2") format("woff2-variations"), url("/fonts/dm-sans-variable.woff2") format("woff2"); } @font-face { font-family: "DM Sans"; font-style: italic; font-weight: 100 1000; font-display: swap; src: url("/fonts/dm-sans-italic-variable.woff2") format("woff2-variations"), url("/fonts/dm-sans-italic-variable.woff2") format("woff2"); } /* ── DM Mono — not variable; three static weights ───────────────────── For code blocks, kbd, file paths, anything monospaced. */ @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: italic; font-weight: 400; font-display: swap; src: url("/fonts/dm-mono-400-italic.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"); } /* ── Preload hints ──────────────────────────────────────────────────── Add this to your for the upright Newsreader file (the body workhorse — everything else can wait): */