Come modificare il font del tuo sito WordPress
Hai mai pensato di modificare il font sul tuo sito WordPress? Il font costituisce un aspetto grafico molto importante. E poi è vero quel che si dice: “anche l’occhio vuole la sua parte”.
Vuoi modificare il font di un sito WordPress? Usare un tipo di carattere che si addica meglio al design del tuo blog ed all’argomento che tratti?
Per alcuni, la scelta del font può sembrare un dettaglio secondario. Invece, è un elemento che ha un forte impatto sia sull’estetica del sito, sia sulla leggibilità dei contenuti.
I font che possono essere usati sono tantissimi. Oltre a quelli standard, puoi anche utilizzare uno dei font gratuiti di Google. Non ti resta che continuare a leggere per scoprire come modificare il font di un sito WordPress.
Come modificare il font di un sito WordPress
Esistono diversi modi per modificare il font di un sito WordPress. Puoi infatti utilizzare le funzioni del tuo tema oppure dei plugin. Ecco in che modo dovrai procedere.
Cambiare font dalle funzionalità del tema
Proprio perché si tratta di una funzionalità tanto richiesta, sono sempre più i temi WordPress premium che offrono la possibilità di cambiare i vari font all’interno del sito.
Prima di installare dei plugin o di aggiungere i codici dei font, come vedremo più avanti, controlla le opzioni del tuo tema. Vai nella schermata di configurazione del tema o nel pannello Personalizza e dovresti trovare le sezioni dedicate alla modifica del font.
Solitamente, i font inclusi nei temi sono proprio una selezione dei font Google più popolari.
Da questa sezione, cambiare i font del sito sarà molto semplice.
Se però non dovessero piacerti i font messi a disposizione del tuo tema, puoi provare con i sistemi che ti presento di seguito.
Usare i font Google tramite plugin
I migliori font gratuiti sono secondo me quelli messi a disposizione da Google. Attivarli sul tuo sito sarà abbastanza semplice: installa il plugin Easy Google Fonts e lavora sulle varie opzioni. Easy Google Fonts è un plugin semplice da usare e potrai cambiare i font del tuo sito in pochi minuti.
Usare i font Google tramite codice
Se hai un po’ di esperienza di programmazione, e vuoi modificare il font del tuo sito WordPress senza installare plugin aggiuntivi, puoi linkare direttamente al font Google dalla sezione <head> del tuo sito.
Quando sei su Google Fonts ed hai trovato il font che ti piace, copia il codice HTML per incorporare il font. L’opzione che devi scegliere è quella Standard, migliore in termini di performance rispetto a quella chiamata @import.
Ora, incolla il codice nella sezione <head> del file header.php del tuo tema. Fatto questo, il font Google viene caricato e può essere usato nel file style.css. Scrivi quindi delle regole CSS per sovrascrivere il font usato da p, h1, h2, h3, eccetera.
Per approfondire, spiego nel dettaglio come gestire i font con il CSS nella lezione “Lavorare con i font” del video corso base CSS.
Attenzione! Per evitare che i codici che aggiungi ai file vengano sovrascritti dagli aggiornamenti del tema, fai queste modifiche su un tema child.
Caricare altri font usando un plugin
Se non vuoi usare uno dei font Google, puoi dare un’occhiata ad uno dei numerosi siti web che offrono font gratuiti. Un consiglio: come per tutte le cose che riguardano il web, prima di scaricare file sul tuo PC controlla che il sito in questione sia affidabile!.
Questi siti solitamente permettono di scaricare font in formato ttf e/o otf. Per modificare il font del tuo sito WordPress, dovrai quindi caricare il file del font che ti piace usando un plugin come Use Any Fonts.
Conclusione
Questi sono quattro semplici metodi per modificare il font di un sito WordPress. Cambiare un font richiede pochi minuti di lavoro, però può avere un impatto notevole sulla facilità di lettura dei contenuti. Investi quindi del tempo nel scegliere quello più adatto al tuo sito ed alle esigenze dei tuoi utenti.
Conosci altri sistemi per cambiare font su un sito WordPress?
Hai mai notato la differenza di leggibilità tra un font e un altro?
Per qualunque domanda, come sempre puoi lasciare il tuo commento qui sotto al post. Alla prossima guida!
NOTA: Questa guida è stata aggiornata il
L’integrazione con Google Fonts è quella che preferisco ma non dimenticherei che è anche possibile utilizzare la regola CSS @font-face consente di caricare caratteri personalizzati ospitando i file (ttf, eot, ecc…) direttamente sul proprio server. Ad esempio, per il mio sito che usa un font a pagamento, è stata la soluzione più adatta.
Nicholas, come si caricano i file tff sul server?
La soluzione più semplice è via FTP o attraverso il File Manager (se il tuo hosting lo prevede).
“We do not allow FTP (File Transfer Protocol) access to any WordPress.com blogs for security reasons.” … :((
Purtroppo Walter su WordPress.com non hai accesso FTP :( Leggi in questa guida tutte le differenze tra WordPress.com e WordPress.org.
Certo Nicholas :) grazie della tua integrazione. Al prossimo aggiornamento del post inseriremo un paragrafo al riguardo. Un saluto!
Buongiorno,
non riesco ad inserire il font concielian alpha, perchè non presente ne in plug in ne in google font
potete aiutarmi
grazie
Ciao Nicola, testa il plugin https://it.wordpress.org/plugins/use-any-font/.
Salve!
Vorrei sapere è possibile avere in una pagina oppure in un articolo 2 font differenti?
Ciao Andrea, è possibile lavorando sul CSS: https://sos-wp.it/modificare-css-singola-pagina-wordpress/.
Buongiorno,
cambiando tema molti titoli H2 sono diventati piccoli, più piccoli del testo.
Probabilmente è dovuto all’aumento delle dimensioni del testo nel body (con il CSS).
Alcuni titoli sono stati aggiornati e sono grandi, ma altri sono rimasti piccoli.
Ora, io ho provato a mettere questo codice:
H2 {
font-size: 26px;
}
In pratica aumenta lo spazio a disposizione, ma il carattere rimane uguale.
Mi spiego meglio, se il titolo è in 2 righe, ora l’interlinea è maggiore, quindi le righe sono più distanti.
E’ possibile aumentare il carattere per tutti i titoli? E’ mai capitato a voi che cambiando il tema alcuni titoli non siano stati aggiornati?
grazie
Ciao Massimo, hai ispezionato il codice con il css https://sos-wp.it/guida-css-wordpress/ ?
Buongiorno,
si avevo letto quell’articolo in cui c’era proprio H2, infatti avevo copiato da lì una parte di codice.
I dubbi sono 2:
1) nelle pagine ho già i titoli di paragrafo H2, a volte c’è scritto font=12, altre volte non c’è niente. Io pensavo che cambiando il CSS, queste modifiche sovrascrivevano la pagina wordpress, ma a quanto pare non è così.
2) Guardando nell’anteprima e anche nel testo, se io cambio il font-size di H2 mi aumenta solo l’interlinea e non mi cambia il colore.
Almeno il colore pensavo che cambiasse in tutto il sito.
E poi perché se metto FONT-SIZE cambia la dimensione dello spazio occupato e non la dimensione del carattere.
Ho provato a creare una pagina nuova e impostare H2 in alcuni titoli, questa volta a livello di anteprima della personalizzazione del tema vedo le modifiche, ma nella pagina non cambia nente.
mah
Ciao Massimo, dove hai inserito le tue modifiche al CSS?
Ah sono andato in aspetto > personalizza > editor > CSS personalizzato.
Come ho sempre fatto, solo che questo codice di H2 non funziona oppure per le nuove pagine funziona solo in anteprima.
Per il resto, il template è proprio come lo volevo.
grazie 1000
Ti sei ricordato di pulire la cache del browser?
Ciao!
Credo di aver capito, in realtà erano al posto degli H2, ma erano testo con un size minore.
Per il resto funziona.
Se modifico il font nel CSS sul body dovrei correggere anche quelli, anche se c’è specificato il font-size nella pagina wordpress, giusto?
Ciao Massimo, sì. Se hai dubbi scrivici a supporto@sos-wp.it. Hai attivato la nostra Assistenza Prioritaria?
Non so cosa sia.
Ciao Massimo, dai un’occhiata qui https://sos-wp.it/assistenza-prioritaria/. Attraverso la sua attivazione puoi ricevere risposte da parte di esperti WordPress in meno di 1ora, su qualsiasi argomento legato alla realizzazione di un sito web… non male, no?
salve, ho escluso i fonts di google per velocizzare il sito su csm wp,
ma i caratteri risultano ora troppo piccoli. ho inserito nel foglio di stile
..p {font-size: 14pt !Important; e ho ingrandito il testo, ma non so come
fare per ingradire il resto dei caratteri ( link barra laterale, commenti,
elenco puntato e menu )…( sono poco esperto ) se qualcuno mi puo dare una mano
inserisco magari il codice in modo da capire meglio come fare…grazie in anticipo :-)
Ciao, il si