← Tutti gli articoli

Tutorial

Sostituisci i font su qualsiasi sito web con il CSS

17 maggio 2026 · di JustZix Team

La tipografia fa o disfa un'esperienza di lettura. Se un sito impone un carattere sottile e a basso contrasto, puoi sovrascriverlo. Una singola regola CSS JustZix sostituisce ogni font della pagina con uno che ti piace davvero.

Forza un font di sistema ovunque

La sostituzione più semplice e veloce usa lo stack di font del sistema operativo. Si carica all'istante perché non viene scaricato nulla, e ha un aspetto nativo su ogni piattaforma.

*, *::before, *::after {
  font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

Il selettore universale è voluto. I siti applicano font a decine di elementi, e provare a coglierli uno per uno è una battaglia persa. Sovrascrivi tutto, poi fai le eccezioni.

Tieni il codice in monospace

Dopo la sostituzione totale sopra, i blocchi di codice perdono il loro font monospace. Ripristinalo così gli snippet restano allineati.

code, pre, kbd, samp, tt,
.hljs, [class*="language-"] {
  font-family: "JetBrains Mono", "Fira Code",
    Consolas, "SF Mono", Menlo, monospace !important;
}

Usa un web font personalizzato

Vuoi qualcosa di più distintivo? Carica un font con @font-face da una CDN, poi applicalo. Questo carica Inter, un sans-serif pulito e altamente leggibile.

@font-face {
  font-family: "Inter Web";
  src: url("https://rsms.me/inter/font-files/Inter-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-display: swap;
}
body, p, div, span, li, a, h1, h2, h3, h4 {
  font-family: "Inter Web", sans-serif !important;
}

Poiché JustZix inietta questo CSS nella pagina, la regola @font-face funziona proprio come se l'avesse scritta l'autore del sito. Scegli qualsiasi URL WOFF2 di cui ti fidi.

Migliora la leggibilità già che ci sei

Sostituire il carattere è un buon momento per correggere peso e rendering. Molti siti impostano il testo del corpo troppo sottile.

body {
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 {
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

Un'opzione adatta alla dislessia

Se i font standard sono difficili da leggere, passa a un carattere progettato per questo e allenta la spaziatura.

* {
  font-family: "Atkinson Hyperlegible", Verdana, sans-serif !important;
  letter-spacing: 0.02em !important;
  word-spacing: 0.08em !important;
}

Cose a cui prestare attenzione

• Ridichiara sempre il monospace per il codice, altrimenti gli snippet si disallineano.
• Usa font-display: swap così il testo non sparisce mai mentre un web font si carica.
• Testa i font delle icone — alcuni siti renderizzano le icone tramite una famiglia di font, e la regola totale può nasconderle. Escludi i loro selettori.
• Tieni uno stack di font salvato così puoi riusarlo in ogni regola.

Poi, metti a punto dimensione e spaziatura nella nostra guida alla lettura confortevole. Prendi altri snippet dagli esempi pronti all'uso, oppure scarica JustZix se stai configurando per la prima volta.