/* ============================================================ instaurus-fonts.css — tipografia self-hostata di InsTaurus. ------------------------------------------------------------ Fraunces (display: h1, h2, logotipo) e Instrument Sans (tutto il resto: interfaccia, dati, codici), presi da Google Fonts e serviti dall'origine dell'app. PERCHE' NON DIRETTAMENTE DA GOOGLE. Il service worker fa `return` su ogni richiesta verso un'origine diversa dalla propria (sw.js, "bypass per qualunque origine != app stessa"): serve a non ricevere risposte opache dai CDN. Conseguenza non voluta: un font caricato da fonts.gstatic.com NON entrava mai nella Cache Storage, e in cantiere senza rete la tipografia spariva del tutto cadendo su system-ui. Da qui i file stanno in vendor/, quindi sono precacheati (sw.js, ASSETS_MODULI) e serviti cache-first. Si aggiunge un secondo motivo, indipendente dal primo: `_headers` dichiara `font-src 'self'`. Anche senza service worker, un font di terze parti sarebbe bloccato dalla CSP. Le due cose insieme rendono il self-hosting l'unica strada possibile: niente `preconnect`, niente `display=swap` remoto, niente CDN. Vale la pena ripeterlo perche' il mockup di Alabastro arrivava con un a fonts.googleapis.com in testa: li' funzionava, qui sarebbe stato bloccato due volte e nessuno se ne sarebbe accorto in fretta — i caratteri di sistema somigliano abbastanza da non gridare. SUBSET: solo latin e latin-ext. Cirillico, greco e vietnamita sono scartati — peso inutile per un gestionale italiano. latin-ext resta perche' copre i nomi commerciali est-europei e turchi dei fornitori. In pratica, su testo italiano il browser scarica il SOLO latin: latin-ext parte unicamente se in pagina compare un glifo di quel blocco (il nome di un fornitore polacco o turco, di norma). PESI E ASSI. Tutt'e due le famiglie sono VARIABILI, quindi un file solo per famiglia copre ogni peso richiesto: Fraunces `font-weight: 300 700` -> 560 / 620 / 700 in uso Instrument Sans `font-weight: 400 700` -> 400 / 500 / 560 / 600 / 620 / 650 / 680 in uso Dichiararli come intervallo e' il modo corretto di descrivere un asse variabile: chiedere un peso intermedio non fa ripiegare il browser su una finta grassettatura. E' esattamente cio' che serve ad Alabastro, che i pesi intermedi li usa davvero (560 nei titoli, 620 nei display, 650 nelle etichette maiuscole). ERA UNA TRAPPOLA NOTA, e questa volta non e' scattata. IBM Plex Mono self-hostato aveva solo 400/500/600 statici: chiedere il 700 faceva ripiegare il browser sul 600 SENZA DIRLO, e il grassetto non arrivava mai. Instrument Sans copre 400-700 su un asse continuo, quindi il problema non si ripresenta — ma il controllo va rifatto ogni volta che entra una famiglia nuova, perche' fallisce in silenzio. Fraunces porta anche un asse OPTICAL SIZE (opsz 9-144). I browser applicano `font-optical-sizing: auto` da soli, quindi il disegno si adatta al corpo: piu' aperto nei testi piccoli, piu' contrastato nei titoli grandi. E' esattamente quel che serve a un display serif usato sia a 58px nel titolo della landing sia a 20px nel logotipo di fianco. PERCHE' NON C'E' PIU' UN MONOSPAZIO. Alabastro non ne prevede uno: codici articolo, ID e targhette passano a Instrument Sans come il resto. `--font-mono` resta dichiarato in instaurus-tokens.css come ALIAS di `--font-ui`, cosi' i circa trenta punti che lo chiedono (glass.css, nova.js, landing.html) continuano a funzionare senza essere toccati uno per uno. Il costo e' che i codici perdono l'allineamento in colonna: se un giorno da' fastidio, si rimette IBM Plex Mono ridando un valore proprio a quell'unico token. PESO. Escono Archivo (67.536 byte) e IBM Plex Mono (86.324 byte su sei file), entra Instrument Sans (41.236 byte su due): il precache del service worker cala di **112.624 byte**. Sul PRIMO RENDER, dove conta davvero, si scarica il solo latin: da 80.144 a 30.092 byte, cioe' **-50.052 byte**. Il ridisegno, per una volta, alleggerisce. LICENZA: SIL Open Font License 1.1 per tutte e due le famiglie. Il self-hosting e' espressamente consentito, ma la OFL chiede che la licenza e la nota di copyright ACCOMPAGNINO i font ovunque li si ridistribuisca — e noi li serviamo dal sito. Stanno qui accanto, e vengono pubblicate insieme al resto di vendor/: vendor/fonts/OFL-Fraunces.txt (Copyright 2018, Undercase Type) vendor/fonts/OFL-InstrumentSans.txt (Copyright 2022, Instrument) Le due note di copyright sono copiate alla lettera da google/fonts: se un giorno si aggiorna un font, si ricopia anche la sua, senza riscriverla a mano — una nota di copyright corretta a memoria non e' piu' quella dell'autore, ed e' esattamente cio' che la licenza chiede di preservare. ORDINE: va caricato PRIMA di instaurus-tokens.css. Serve sia a index.html sia a landing.html sia a scheda.html. ============================================================ */ /* ---------- Fraunces (variabile, 300-700, opsz 9-144) — display ---------- */ /* latin */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(./fraunces-var-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; } /* latin-ext */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(./fraunces-var-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- Instrument Sans (variabile, 400-700) — tutto il resto ---------- Porta anche un asse di LARGHEZZA (font-stretch 75%-100%). Non lo usiamo: dichiararlo al 100% fissa la larghezza normale ed evita che un `font-stretch` ereditato da chissa' dove restringa l'interfaccia senza che nessuno lo abbia chiesto. */ /* latin */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(./instrument-sans-var-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; } /* latin-ext */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(./instrument-sans-var-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }