/** * Copyright (c) 2026 Protocol-Z. All rights reserved. Proprietary and Confidential. * * Font self-hosted di Protocol-Z. * * Rimpiazza le due verso fonts.googleapis.com che ogni pagina caricava. Quelle * richieste chiedevano l'intero intervallo degli assi variabili di Material Symbols, e * Google rispondeva con il font completo: 3,96 MB per la famiglia Outlined e 5,35 MB per * la Rounded, ~3600 icone, su OGNI pagina. Qui ci sono solo le icone realmente usate: * 105 KB e 33 KB. I file sono generati da `python3 tools/build-fonts.py` e committati. * * ------------------------------------------------------------------------------------ * ATTENZIONE PRIMA DI MODIFICARE LE CLASSI QUI SOTTO * ------------------------------------------------------------------------------------ * `font-size: 24px` e `line-height: 1` NON sono decorativi e non vanno rimossi. * * Fanno parte della classe che Google serviva insieme al font. Il CSS delle pagine non ha * mai dichiarato ne' `font-family` ne' `font-size` per `.material-symbols-outlined`: * arrivavano da li'. Togliendoli, le icone ereditano il `font-size` del genitore e * diventano minuscole dove il testo circostante e' piccolo, corrette dove e' 24px -- il * classico "icone rotte su alcuni dispositivi e giuste su altri". Chi vuole un'icona di * dimensione diversa imposta `font-size` sul singolo elemento, come gia' avviene nel resto * del codice. * * Analogamente, il subsetting deve preservare le feature OpenType `rlig` e `rclt`: sono * quelle che trasformano la sequenza di lettere "home" nella glyph. Vedi tools/build-fonts.py. */ /* ------------------------------------------------------------------ Geist (pagine pubbliche) */ /* Il carattere del marchio: sito aziendale, Z Home, Z Marine, legali, 404. Un file variabile copre i pesi 100-900. Dashboard e viewer restano su Inter. */ @font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("geist-latin.19f9c925.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: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("geist-latin-ext.824f485b.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; } /* Monospaziato: etichette tecniche, numeri e misure. Si scarica solo se una regola lo usa. */ @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("geist-mono-latin.684ad5b5.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: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("geist-mono-latin-ext.1a189eb9.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; } /* ------------------------------------------------------------------ Inter (dashboard, viewer) */ /* Un solo file variabile copre i pesi 100-900: sostituisce i 5 file statici che il sito scaricava prima. `swap` mostra subito il fallback di sistema e non blocca il testo. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("inter-latin.c9407645.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: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("inter-latin-ext.a28eb6d3.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; } /* ------------------------------------------------------------ Material Symbols (icone) */ /* `block` invece di `swap`: un'icona resa con il font di sistema mostrerebbe il nome dell'icona come testo ("view_in_ar"), che e' peggio di un breve vuoto. Con un file da 105 KB servito dallo stesso dominio quel vuoto e' impercettibile -- diversamente dai 3,96 MB di prima, che rendevano necessario nascondere le icone via JavaScript. */ @font-face { font-family: "Material Symbols Outlined"; font-style: normal; font-weight: 100 700; font-display: block; src: url("material-symbols-outlined.4d74088f.woff2") format("woff2"); } @font-face { font-family: "Material Symbols Rounded"; font-style: normal; font-weight: 100 700; font-display: block; src: url("material-symbols-rounded.1b32fc8e.woff2") format("woff2"); } .material-symbols-outlined, .material-symbols-rounded { font-weight: normal; font-style: normal; font-size: 24px; /* obbligatorio -- vedi nota in cima al file */ line-height: 1; /* obbligatorio -- vedi nota in cima al file */ letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; /* Il font e' variabile: questi sono i valori di default, sovrascrivibili per elemento. */ font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; /* Riquadro di 1em: mantiene l'allineamento con il testo e impedisce che una legatura non risolta dilati il layout mostrando il nome dell'icona per esteso. `flex-shrink: 0` e `min-width` non sono opzionali. Quasi tutte le icone del prodotto vivono dentro un contenitore flex -- pulsanti, chip, voci di menu -- e li' `width` e' solo la dimensione di partenza: un elemento flex si restringe sotto la propria larghezza quando la riga e' stretta. Insieme a `overflow: hidden` il risultato non e' un'icona piccola, e' un'icona TAGLIATA: si vede la meta' sinistra del disegno. Succedeva al chip "Nuova cartella" sotto i 600px (10px su 20) e al pulsante "Torna alla Home" della 404 (19px su 24) a ogni larghezza. */ width: 1em; height: 1em; min-width: 1em; flex-shrink: 0; overflow: hidden; -moz-osx-font-smoothing: grayscale; user-select: none; } .material-symbols-outlined { font-family: "Material Symbols Outlined"; } .material-symbols-rounded { font-family: "Material Symbols Rounded"; }