/* OpenDyslexic — the dyslexia-friendly font option, switched on per person. WHY THIS FILE EXISTS SEPARATELY FROM kit.css: the Multiplayer Collection app (/app) and games-library.html deliberately do NOT load kit.css — it restyles base elements they don't want — but they must offer the same font. One small file, four consumers (kit pages, login, app, games-library). It also keeps kit.css's documented "no font loading here" stance intact. WHY IT IS ALWAYS LOADED, even for people who never turn it on: a browser downloads a @font-face file only when CSS actually matches rendered text. Declaring the faces costs a reader who never enables this exactly ZERO font bytes — the only cost is this ~2KB of CSS. In exchange there is one code path instead of two, and switching the font on is instant because the rules are already parsed. Licence: SIL Open Font License 1.1 — see fonts/OFL.txt. The files are the unmodified Original Version, so nothing here may rename the family "OpenDyslexic". */ @font-face { font-family: "OpenDyslexic"; src: local("OpenDyslexic"), url("/shared/fonts/OpenDyslexic-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; /* swap, deliberately: `block` would blank every word for up to 3s on the first load, and `optional` can decide never to apply the font at all — unacceptable for something the reader explicitly asked for. Readable immediately, correct a moment later. */ font-display: swap; } @font-face { font-family: "OpenDyslexic"; src: local("OpenDyslexic Bold"), url("/shared/fonts/OpenDyslexic-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } /* The italic faces are real files rather than letting the browser slant the upright one: a synthesised oblique distorts exactly the letter shapes this font exists to protect, and the site's markdown emits real /. They cost nothing until italic text is actually rendered. */ @font-face { font-family: "OpenDyslexic"; src: local("OpenDyslexic Italic"), url("/shared/fonts/OpenDyslexic-Italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "OpenDyslexic"; src: local("OpenDyslexic Bold Italic"), url("/shared/fonts/OpenDyslexic-BoldItalic.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; } /* THE SWITCH. `:root.kit-odf` scores (0,2,0), which outranks both kit.css's token block (`:root, html[data-theme="dark"]`, (0,1,1)) and the Collection app's own `:root` ((0,1,0)) — so this single rule re-fonts every page that reads var(--sans), whichever stylesheet loaded first. The class is put on by kit.js at parse time (and by a one-line script in the head of the few pages that don't run kit.js), so it is already in place before the first paint: no flash of the wrong font. */ :root.kit-odf { --sans: "OpenDyslexic", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; } /* The Collection app tracks its body text at -0.005em. OpenDyslexic's letterforms are already wide and need their own spacing; tightening them works against the point of the font. (0,2,1) beats that page's plain `body` rule. */ :root.kit-odf body { letter-spacing: 0; } /* Monospace is deliberately NOT switched. There is no OpenDyslexic Mono face in this bundle, and dropping a proportional font into code blocks, hex readouts and anything column-aligned would break the alignment that makes them readable — the opposite of what this feature is for. JetBrains Mono is already a high-legibility face with disambiguated glyphs. If the Mono face is ever added, one more @font-face plus a `--mono` line here is the whole change. */