/* ===================================================== Story Times — self-hosted webfonts ===================================================== Why this file exists: css/style.css asked for "Comic Sans MS" and css/story-v5.css for a rounded ui stack, and the repo shipped no font files at all. On Android and ChromeOS neither stack has a single member installed, so both fell straight through to generic sans and a large share of children never saw the intended face. Everything here is self-hosted — no CDN link, no build step, no npm dependency. THE THREE FAMILIES ------------------ Fredoka — display: headings, game titles, big numbers. Rounded geometric, wide apertures, generous x-height. SIL Open Font License 1.1 — assets/fonts/fredoka/OFL.txt Copyright 2016 The Fredoka Project Authors. Nunito — body/UI: buttons, prompts, labels. Rounded terminals pair with Fredoka; tall x-height keeps it readable at 16-24px. SIL Open Font License 1.1 — assets/fonts/nunito/OFL.txt Copyright 2014 The Nunito Project Authors. Andika — literacy ONLY: letters and words a child is learning to READ. Not a style choice. Built by SIL specifically for beginning readers: single-storey `a` and `g` matching what children are taught to write, I/l/1 and 0/O drawn so they cannot be confused, and b/d/p/q that differ by more than reflection. Do not use it as a general body face, and do not substitute a "nicer" font for it. SIL Open Font License 1.1 — assets/fonts/andika/OFL.txt Copyright (c) 2004-2022 SIL International. Reserved Font Names "Andika" and "SIL". PROVENANCE / SUBSETTING ----------------------- The .woff2 files are Google Fonts' own Latin-subset builds, copied byte-for-byte from fonts.gstatic.com (Fredoka v17, Nunito v32, Andika v27). Nothing here was re-subset or re-compressed locally, so there is no tool in the loop that could silently drop a glyph, and the Andika binaries are unmodified under their Reserved Font Name. Only the `latin` subset is shipped. It covers U+0000-00FF, so every Western European accent (é ñ ü ç å ø) is present, plus the curly quotes, em dash and ellipsis the stories actually use — a sweep of data/, css/ and the pages found zero characters outside this range. Adding `latin-ext` (Central/Eastern European + IPA) would have cost another 202 KB, most of it Andika, for glyphs nothing renders. The `unicode-range` descriptors below are what makes that safe: a character outside the range falls through to the next family in the stack rather than rendering as a tofu box. Fredoka and Nunito are variable fonts, so one file each covers the whole weight range instead of one file per weight. Total: 4 files, 107,540 bytes. Fonts are content-hashed by upstream version, never edited in place — /assets/fonts/* is a good candidate for the same long-lived immutable Cache-Control that vercel.json already grants /assets/art-v2/*. ===================================================== */ /* ---- Fredoka (display) — variable, weight 300-700 ------------------- Google serves this with the wdth axis pinned, hence font-stretch:100%. Keep it: dropping the descriptor lets a browser pick a different width instance and the headings drift narrower. */ @font-face { font-family: "Fredoka"; font-style: normal; font-weight: 300 700; font-stretch: 100%; font-display: swap; src: url("../assets/fonts/fredoka/fredoka-variable-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; } /* ---- Nunito (body/UI) — variable, weight 400-800 ------------------- */ @font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../assets/fonts/nunito/nunito-variable-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; } /* ---- Andika (literacy) — static 400 + 700 -------------------------- Andika has no variable build; 400 for words being read, 700 for the letter or grapheme currently being taught. Two weights, no more. */ @font-face { font-family: "Andika"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/andika/andika-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; } @font-face { font-family: "Andika"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/andika/andika-700-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; } /* ---- Tokens -------------------------------------------------------- Every stack ends in a generic family, and the names in between are real fonts that are actually installed somewhere — these are the faces a child sees during the `swap` flash, or forever if a .woff2 404s. The literacy fallbacks are chosen for letterforms, not looks: Comic Sans MS and Century Gothic both draw a single-storey `a`, which is the one property that matters if Andika is unavailable. That is the only place in this file where Comic Sans is still the right answer. */ :root { --font-display: "Fredoka", ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif; --font-body: "Nunito", ui-rounded, "Avenir Next", "Segoe UI", system-ui, sans-serif; --font-literacy: "Andika", "Comic Sans MS", "Century Gothic", Verdana, sans-serif; }