/* ============================================================ fonts.css Self-hosted webfonts. Link this in the of EVERY page, before the page's own styles: Why a separate file rather than inline in index.html: nav.js and footer.js render on all fourteen pages and both reference Instrument Serif, Inter and JetBrains Mono by name. @font-face is document global, so whichever page they land on has to have declared these or the nav and footer silently fall back to Georgia and system-ui. ------------------------------------------------------------ THE FOUR FILES, and where to get them. Easiest route, already subset to latin and already woff2: https://gwfh.mranftl.com/fonts (google-webfonts-helper) Pick the family, choose "Latin", download, take the woff2. Or via npm if you would rather have it in the build: npm i @fontsource-variable/inter @fontsource/instrument-serif npm i @fontsource-variable/jetbrains-mono then copy the woff2 files out of the "files" folder inside each package under node_modules. Put all four in a fonts/ folder next to your HTML and rename to match the src paths below, or edit the paths to match what you downloaded. Either is fine, just be consistent. fonts/Inter-Variable.woff2 ~50 KB latin subset fonts/InstrumentSerif-Regular.woff2 ~25 KB fonts/InstrumentSerif-Italic.woff2 ~26 KB fonts/JetBrainsMono-Variable.woff2 ~65 KB Around 165 KB total, cached after first load, and zero external requests. Do NOT grab the full unsubset files from the foundries unless you want Inter alone to be 340 KB. ------------------------------------------------------------ ONE THING TO CHECK, and it matters on this site specifically. The nav and footer both render Cree syllabics: maskêko-sâkahikan in Unified Canadian Aboriginal Syllabics None of these three families covers that block. Right now those glyphs are being drawn by whatever system font the visitor happens to have, which is why they may look slightly off from the Latin next to them, and on some Windows machines they may not render at all. Self-hosting does not change that either way, but while you are in here it is worth fixing properly: https://fonts.google.com/noto/specimen/Noto+Sans+Canadian+Aboriginal Download it, drop it in fonts/, and uncomment the last block in this file. The unicode-range means it only ever downloads for visitors who actually hit a syllabics character, so it costs nothing on pages without them. ------------------------------------------------------------ A NOTE ON format(). The only value the spec allows for woff2 is format("woff2"). You will see format("woff2-variations") in a lot of older snippets; it was a proposal that never landed, editors flag it as an error, and browsers that support variable fonts do not need it. A variable woff2 loads correctly declared as plain woff2 with a font-weight RANGE, which is what the two variable faces below do. ============================================================ */ /* ---- Inter ---- Variable, 300 to 800. The Google build also carried an optical size axis; the latin subsets do not, so font-optical-sizing:auto in index.html becomes a no-op. No visual break, very slightly less refined at display sizes. Not worth 300 KB to get back. */ @font-face { font-family: "Inter"; src: url("fonts/Inter-Variable.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; } /* ---- Instrument Serif ---- Regular and italic, both used. Italic carries .h-pre in the hero (the line "Every band member has"), so it is not optional. */ @font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } /* ---- JetBrains Mono ---- Variable covers the 400, 500 and 700 the pages ask for in one file, which is smaller than shipping three statics. */ @font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } /* ---- Cree syllabics ---- Uncomment the four blocks below once fonts/NotoSansCanadianAboriginal-Regular.woff2 is in place. Declared under the same family names so it slots in as a fallback for exactly those codepoints and nothing else. @font-face { font-family: "Inter"; src: url("fonts/NotoSansCanadianAboriginal-Regular.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; unicode-range: U+1400-167F, U+18B0-18FF; } @font-face { font-family: "JetBrains Mono"; src: url("fonts/NotoSansCanadianAboriginal-Regular.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+1400-167F, U+18B0-18FF; } @font-face { font-family: "Instrument Serif"; src: url("fonts/NotoSansCanadianAboriginal-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+1400-167F, U+18B0-18FF; } ---- end of the syllabics block ---- */