/* ============================================================================
fonts.css — SELF-HOSTED WEBFONTS — THE APP GROUP
----------------------------------------------------------------------------
Created 2026-08-25. Replaces the Google Fonts that was in the
of app.html, activation.html, activation-event.html, control.html, org.html
and es.html.
WHY IT MATTERS MORE HERE THAN ON THE MARKETING SITES: these are the SIGNED-IN
pages. Every load sent the visitor's IP to Google's font CDN from the head,
before anything was asked and before any consent could exist — on pages that
handle special category health data. That is a DPIA and Cyber Essentials
question to answer before NHS conversations, not after.
⚠⚠ AND IT CLOSES A FALSE CLAIM. `styles.css` has said, near the top, "All
brand fonts self-hosted from /fonts/ (woff2). No CDN dependency." for as long
as anyone can tell — while neither app folder HAD a fonts/ directory and every
page fetched from Google. A comment asserting something is handled is itself a
claim and nothing checks it. It is true now. Keep it true.
Subsets: latin + latin-ext in one file each. latin-ext is NOT optional here —
app.html and es.html render real people's NAMES, and without it a name renders
half in one font and half in another.
⚠ CARRIED: no Cyrillic / Greek / Vietnamese subsets. The marketing sites only
ever render MLJ's own English copy so it did not arise there; these pages
render names, and the UK has large Ukrainian, Bulgarian, Greek and Vietnamese
populations. A missing glyph falls back to a system font and stays readable,
so this is untidiness rather than a fault — but it is a real open item in a
product about getting names right.
WEIGHTS — exactly what the two Google requests asked for, nothing added:
Raleway 400/500/600/700/800/900 (app asked 400-800, portals 600-900)
Roboto 300/400/500/700/900 + italic 400 (app asked 400-700, portals 700/900)
Oswald 400/500/700 (the Glastonbury event theme only)
⚠⚠ FOUR FAMILIES WERE DROPPED, THREE OF THEM BECAUSE NOTHING RENDERED THEM:
Lato — WAS genuinely used (30 declarations in each styles.css and
~130 across the three portal pages). Replaced with Roboto,
per Suke's standing decision of 2026-08-24 that body text
is Roboto, not Lato. The marketing styles.css had already
had exactly this change; the app group had been missed.
Dancing Script — requested on every app page. `--font-script` is referenced
by 8 selectors, and the class those selectors need
(`.script`) appears ZERO times in app.html, activation.html
and activation-event.html. Dead CSS inherited from the
marketing sheet. ⚠ The RULES are deliberately left in place
— removing dead CSS is a separate judgement on a shared
file, and this change is about what gets REQUESTED.
Schoolbell — same: `.handwritten` appears zero times. (The word
"handwritten" does appear in an image alt and a form label,
which is what makes a bare grep say 2.)
Oswald — ⚠⚠ NOT DEAD. See the note below.
✅ OSWALD IS NOW SELF-HOSTED TOO — 2026-08-25, later the same day.
Suke saved oswald-v57 400/500/700 (latin + latin-ext) by hand from
gwfh.mranftl.com, because Google's font CDN is unreachable from a session
(403 / tunnel refused). ⇒ **THE ESTATE NOW MAKES NO THIRD-PARTY FONT REQUEST
AT ALL**, on any of the four sites. The Google and its preconnect are
gone from activation-event.html.
⚠ WHY OSWALD IS IN BOTH APP FOLDERS when only ONE page renders it. It is used
by `body.activation-mode.event-glastonbury` in styles.css, and that body class
exists only on mlj-user-app/activation-event.html — no portal page uses it.
It is here anyway because **the two app fonts.css files are kept byte-identical
by hand**, and an unused @font-face costs a visitor nothing: browsers fetch
only the weights that rendered text actually uses. A divergence between the two
copies would cost far more than three unfetched files.
⚠ Master copies of every woff2 live in `_Image Library/-v-latin_latin-ext/`.
Do not delete them — they cannot be re-fetched from a session.
⚠ This file is NOT synced by any build script. There is one copy per site
folder and they must be kept identical by hand. It sits alongside a fonts/
folder of 12 .woff2 files (363 KB).
⚠⚠ NOTE ON THE WORDING ABOVE. The two Google font hostnames are deliberately
NOT written out anywhere in this file, and that is not squeamishness. An audit
of third-party requests IS a grep for those hostnames, so a comment naming one
reads exactly like a live tag and the audit reports a clean file as dirty.
⚠ This was learnt FOUR times on 2026-08-25, which is why it is written down:
twice as an assertion that failed because the comment being added contained
the very string it was asserting absent (the GSAP edit, then the photo-QR
fix); once when the estate-wide sweep flagged this file as still calling
Google; and once more inside the first draft of THIS note. Same shape as the
2026-08-24 false positive where a base64 blob containing the letters "GSAP"
made five app files look like GSAP consumers.
⇒ Name hostnames in `MLJ — Decisions.md` and project memory, where nobody is
grepping source. Assert on a live request shape, never on a bare word.
============================================================================ */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/raleway-v37-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/raleway-v37-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/raleway-v37-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/raleway-v37-latin_latin-ext-700.woff2') format('woff2');
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('fonts/raleway-v37-latin_latin-ext-800.woff2') format('woff2');
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url('fonts/raleway-v37-latin_latin-ext-900.woff2') format('woff2');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('fonts/roboto-v51-latin_latin-ext-300.woff2') format('woff2');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/roboto-v51-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/roboto-v51-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/roboto-v51-latin_latin-ext-700.woff2') format('woff2');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url('fonts/roboto-v51-latin_latin-ext-900.woff2') format('woff2');
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('fonts/roboto-v51-latin_latin-ext-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/oswald-v57-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/oswald-v57-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/oswald-v57-latin_latin-ext-700.woff2') format('woff2');
}