/* ========================================================================== fonts.css — the real Digital Empathy brand faces. These are the three faces named on page 13 of the Digital Empathy Brand Guide, in the roles the guide assigns them: All Round Gothic Headers & Paragraph 9 cuts (from the design-system bundle) Altivo Headers & Paragraph 5 cuts (from the design-system bundle) Andora Modern Serif Decorative 2 cuts (licensed 2026-08-10) 🔴 CORRECTION — Andora is IN, and Prata is OUT. An earlier pass removed Andora and substituted Prata, on the strength of a comment inside the mockup bundle's token file saying Andora had no web licence and was print-only. That comment was true for whoever built the mockup. It is NOT true here: Brees licensed Andora from Creative Market on 2026-08-10 (order 148062510) — Regular AND Italic, each with a **Webfont licence**, and the purchase ships `.woff`/`.woff2` in a `Web Fonts/` folder. The brand guide names Andora as the Decorative face. Prata never appears in the guide at all; it was only ever the mockup author's stand-in. Prata's four subsets have been deleted from this file and from assets/fonts/. ⚠️ LICENCE CEILING — the Andora webfont licence is **10,000 pageviews per month**, per style. This is a prototype today, but the moment this goes on a public DE page that ceiling is real and will need upgrading. Do not let this detail get lost between here and launch. Andora ships Regular + Italic only — no bold. Asking for 600/700 yields a synthesised fake, so the decorative face is never emboldened. ========================================================================== */ @font-face { font-family: "All Round Gothic"; font-style: normal; font-weight: 100; font-display: swap; src: url("../fonts/all-round-gothic-100.woff2") format("woff2"); } @font-face { font-family: "All Round Gothic"; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/all-round-gothic-200.woff2") format("woff2"); } @font-face { font-family: "All Round Gothic"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/all-round-gothic-300.woff2") format("woff2"); } @font-face { font-family: "All Round Gothic"; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/all-round-gothic-300i.woff2") format("woff2"); } @font-face { font-family: "All Round Gothic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/all-round-gothic-400.woff2") format("woff2"); } @font-face { font-family: "All Round Gothic"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/all-round-gothic-500.woff2") format("woff2"); } @font-face { font-family: "All Round Gothic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/all-round-gothic-600.woff2") format("woff2"); } @font-face { font-family: "All Round Gothic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/all-round-gothic-700.woff2") format("woff2"); } @font-face { font-family: "All Round Gothic"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/all-round-gothic-700i.woff2") format("woff2"); } @font-face { font-family: "Altivo"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/altivo-300.woff2") format("woff2"); } @font-face { font-family: "Altivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/altivo-400.woff2") format("woff2"); } @font-face { font-family: "Altivo"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/altivo-400i.woff2") format("woff2"); } @font-face { font-family: "Altivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/altivo-500.woff2") format("woff2"); } @font-face { font-family: "Altivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/altivo-700.woff2") format("woff2"); } /* -------------------------------------------------------------------------- Andora Modern Serif — the Decorative face (Brand Guide p.13). 🔴 THESE woff2 FILES ARE OUR OWN CONVERSIONS, NOT THE VENDOR'S. That is deliberate, and re-copying the vendor files over them will break the page. Every file in the Creative Market download's `Web Fonts/` folder — both .woff AND .woff2, both styles — FAILS TO PARSE in Chrome. They download fine (200, full byte count) and then FontFace.load() rejects, so the page silently falls back to a generic serif while looking like it "has" the font. Only the .otf/.ttf in `Fonts/` load. Verified by loading all six files individually: the two OTFs pass, all four webfont files fail. So the licensed OTFs were converted with fontTools: f = TTFont('Andora Modern Serif.otf'); f.flavor = 'woff2'; f.save(...) That is squarely inside the webfont licence Brees purchased, and the output is smaller than the vendor's broken files (23/24 KB vs 37/39 KB). The desktop OTFs are NOT served — they are print/desktop artefacts and there is no reason to expose them. No .woff fallback: the vendor's is broken and every browser that matters supports woff2. -------------------------------------------------------------------------- */ @font-face { font-family: "Andora Modern Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/andora-400.woff2") format("woff2"); } @font-face { font-family: "Andora Modern Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/andora-400i.woff2") format("woff2"); } /* --------------------------------------------------------------------------- POLISH Ł / ł (9/21). Neither licensed face carries them: All Round Gothic has 229 glyphs and Altivo 233, basic Latin only, so "Łukasz Kłobucki" on /about-us/ dropped to the system font for those two letters (Łukasz spotted it on Android). Fix: Poppins (SIL OFL, geometric like All Round Gothic), subset to JUST U+0141 and U+0142 - about 660 bytes per weight - and declared under BOTH family names with a unicode-range. The browser takes only Ł and ł from these faces and every other character from the real font. Declared after the real faces on purpose: for a character two faces cover, the later declaration wins. --------------------------------------------------------------------------- */ @font-face { font-family: "All Round Gothic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400-polish.woff2") format("woff2"); unicode-range: U+0141-0142; } @font-face { font-family: "All Round Gothic"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500-polish.woff2") format("woff2"); unicode-range: U+0141-0142; } @font-face { font-family: "All Round Gothic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600-polish.woff2") format("woff2"); unicode-range: U+0141-0142; } @font-face { font-family: "All Round Gothic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700-polish.woff2") format("woff2"); unicode-range: U+0141-0142; } @font-face { font-family: "Altivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400-polish.woff2") format("woff2"); unicode-range: U+0141-0142; } @font-face { font-family: "Altivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500-polish.woff2") format("woff2"); unicode-range: U+0141-0142; } @font-face { font-family: "Altivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700-polish.woff2") format("woff2"); unicode-range: U+0141-0142; }