Personalizzare i titoli di Gutenberg con CSS consente di controllare font, peso, colore, spaziatura e dimensioni su desktop, tablet e smartphone. La soluzione più flessibile consiste nell’intervenire sulle classi .wp-block-heading e sui selettori h1, h2, h3, usando la funzione CSS clamp() per ottenere una scala tipografica responsiva. Il codice può essere inserito in Aspetto > Personalizza > CSS aggiuntivo oppure nell’editor del sito, se il tema a blocchi mette a disposizione il campo CSS aggiuntivo. Il risultato resta indipendente dai singoli blocchi, è più facile da mantenere e può essere limitato a specifiche pagine o sezioni.

Quali selettori usare per i titoli Gutenberg

I titoli creati con Gutenberg vengono normalmente salvati come elementi HTML h1, h2, h3, h4, h5 o h6. WordPress aggiunge inoltre la classe .wp-block-heading, utile per applicare uno stile comune a tutti i titoli generati dal blocco Intestazione.

Il selettore più generale per il font dei titoli Gutenberg CSS è il seguente:

.wp-block-heading {
font-family: "Montserrat", Arial, sans-serif;
font-weight: 700;
letter-spacing: -0.02em;
}

Questo codice modifica tutti i titoli Gutenberg che utilizzano la classe .wp-block-heading. Se il tema o un plugin rimuove questa classe, i selettori HTML rappresentano un’alternativa più affidabile:

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Montserrat", Arial, sans-serif;
}

Per assegnare dimensioni diverse a ogni livello è preferibile intervenire sui singoli elementi. Un titolo h1 dovrebbe identificare il contenuto principale della pagina, mentre h2 e h3 organizzano le sezioni successive.

.wp-block-heading h1,
h1.wp-block-heading {
font-size: 3.5rem;
}

h2.wp-block-heading {
font-size: 2.5rem;
}

h3.wp-block-heading {
font-size: 1.75rem;
}

La forma h1.wp-block-heading seleziona un elemento h1 che possiede la classe, mentre .wp-block-heading h1 seleziona un h1 contenuto dentro un elemento con quella classe. Usare entrambi i selettori per h1 può essere utile quando il markup prodotto dal tema varia.

Come inserire il CSS in WordPress

La posizione corretta del CSS dipende dal tema installato e dalla versione di WordPress. Nei temi classici, il percorso più comune è Aspetto > Personalizza > CSS aggiuntivo. Dopo aver incollato il codice, è necessario fare clic su Pubblica.

Nei temi a blocchi, il percorso può essere Aspetto > Editor > Stili, ma la voce per il CSS aggiuntivo non è presente in ogni tema o versione di WordPress. Quando l’area non è disponibile, il CSS può essere aggiunto nel foglio di stile di un tema child oppure caricato tramite un plugin dedicato alla gestione degli stili personalizzati.

Passo 1: verificare il markup del titolo

Apri una pagina con Gutenberg, seleziona un blocco Intestazione e controlla il codice HTML con gli strumenti per sviluppatori del browser. Il titolo dovrebbe avere una struttura simile a questa:

<h2 class="wp-block-heading">Titolo della sezione</h2>

Se sono presenti classi aggiuntive, puoi usarle per applicare regole più precise. Per esempio, una classe titolo-evidenziato assegnata dal pannello Avanzate > Classe CSS aggiuntiva permette di modificare soltanto alcuni titoli:

.titolo-evidenziato {
color: #174ea6;
font-weight: 800;
}

Passo 2: aggiungere il CSS nel punto appropriato

In un tema classico, incolla il codice in Aspetto > Personalizza > CSS aggiuntivo. In un tema child, il codice può essere inserito nel file style.css; questa soluzione evita di perdere le modifiche quando il tema principale riceve un aggiornamento.

Se utilizzi un tema child, il foglio di stile dovrebbe essere caricato correttamente tramite il file functions.php. Il metodo esatto dipende dalla configurazione del tema, ma il foglio deve essere accodato dopo quello del tema principale per permettere alle regole personalizzate di prevalere.

Passo 3: controllare la priorità delle regole

I temi WordPress possono definire gli stessi titoli attraverso le impostazioni globali, il file theme.json o regole CSS più specifiche. Se il tuo stile non viene applicato, aumenta la precisione del selettore invece di usare subito !important.

.entry-content h2.wp-block-heading {
font-family: "Montserrat", Arial, sans-serif;
color: #222222;
}

!important va riservato ai casi in cui un tema o un plugin impedisce realmente la sovrascrittura. Un uso esteso rende più difficile modificare il sito in seguito e può creare conflitti tra desktop, editor e versione mobile.

Come rendere responsivi font e dimensioni dei titoli

Una dimensione fissa in px o rem può apparire corretta su un monitor, ma risultare troppo grande su uno smartphone. La funzione CSS clamp() definisce una dimensione minima, una dimensione flessibile e una dimensione massima.

.wp-block-heading h1,
h1.wp-block-heading {
font-size: clamp(2.25rem, 5vw, 4rem);
line-height: 1.1;
}

h2.wp-block-heading {
font-size: clamp(1.75rem, 3.5vw, 2.75rem);
line-height: 1.2;
}

h3.wp-block-heading {
font-size: clamp(1.4rem, 2.5vw, 2rem);
line-height: 1.25;
}

Nel valore clamp(2.25rem, 5vw, 4rem), 2.25rem è la dimensione minima, 5vw permette al testo di adattarsi alla larghezza della finestra e 4rem impedisce al titolo di crescere oltre il limite massimo. Questo approccio riduce la necessità di numerosi media query.

Per una regolazione più tradizionale puoi usare un breakpoint per gli schermi stretti:

@media (max-width: 768px) {
.wp-block-heading h1,
h1.wp-block-heading {
font-size: 2.25rem;
}

h2.wp-block-heading {
font-size: 1.75rem;
}

h3.wp-block-heading {
font-size: 1.4rem;
}
}

La scelta tra clamp() e media query non è esclusiva. clamp() offre una transizione graduale, mentre una media query consente di imporre valori precisi a una determinata larghezza.

Come usare un font personalizzato nei titoli Gutenberg

Il CSS non installa né scarica automaticamente un carattere. Il font deve essere già disponibile nel tema, caricato tramite WordPress, importato da un servizio esterno autorizzato oppure aggiunto come file locale nei formati supportati.

Se il carattere è già disponibile, puoi richiamarlo così:

.wp-block-heading {
font-family: "Source Sans 3", Arial, sans-serif;
font-weight: 700;
}

La famiglia alternativa Arial, sans-serif è importante perché mantiene una resa leggibile quando il font principale non è disponibile. Per migliorare la leggibilità, imposta anche altezza della riga, peso e spaziatura:

.wp-block-heading {
color: #202124;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.015em;
text-wrap: balance;
}

La proprietà text-wrap: balance può distribuire meglio le righe dei titoli nei browser compatibili, ma non deve essere considerata indispensabile. Il titolo deve restare comprensibile anche quando il browser ignora la proprietà.

Come limitare lo stile a una pagina o a una sezione

Applicare il CSS a tutti i titoli del sito è utile per definire una gerarchia coerente. Se vuoi modificare soltanto una pagina, puoi usare la classe del contenitore principale, il tipo di articolo o una classe CSS aggiuntiva assegnata al blocco.

.page-id-245 .wp-block-heading {
font-family: "Merriweather", Georgia, serif;
color: #3b2f2f;
}

Il selettore .page-id-245 è un esempio: il numero deve corrispondere all’ID reale della pagina. Per una singola sezione, assegna una classe dal pannello Avanzate > Classe CSS aggiuntiva e usa quella classe nel foglio di stile.

Dopo ogni modifica, verifica la pagina pubblicata su desktop e smartphone. Svuota la cache del plugin, del tema o del CDN se il vecchio stile continua a essere visualizzato; l’editor di Gutenberg può inoltre mostrare una resa diversa dal front-end quando il tema non carica il CSS personalizzato dentro l’iframe dell’editor.

Il metodo font titoli Gutenberg CSS funziona meglio quando selettori, gerarchia HTML e regole responsivi vengono mantenuti semplici e coerenti.

FAQ

Il selettore più comune è .wp-block-heading, spesso combinato con h1, h2 o h3 per distinguere i diversi livelli.

Nei temi classici si usa Aspetto > Personalizza > CSS aggiuntivo. Nei temi a blocchi il percorso dipende dal tema; in alternativa si può usare un tema child.

Usa font-size: clamp(minimo, valore-flessibile, massimo) oppure una media query con max-width per impostare dimensioni specifiche sui dispositivi più piccoli.

Il CSS richiama il font ma non lo carica. Verifica che il carattere sia installato, registrato dal tema o disponibile tramite un servizio esterno, e controlla il nome esatto della famiglia.

No, nella maggior parte dei casi è sufficiente un selettore più specifico. !important va usato soltanto quando le regole del tema o di un plugin impediscono la sovrascrittura.

Altri articoli di questa serie: