Come modificare il font del tuo sito WordPress

Immagine avatar per Andrea Di Rocco

di Andrea Di Rocco Aggiornato il

Come modificare il font del tuo sito WordPress

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

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

Easy Google Fonts

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.

codice google font per modificare il font di un sito WordPress

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 modulo CSS video corso WordPress.

Se ti interessa imparare ad usare il CSS per personalizzare il tema che usi per il tuo sito, leggi anche la guida introduttiva al CSS per chi usa WordPress.

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

Use Any Font 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.

Se hai bisogno del supporto di un professionista rapido e dal costo accessibile, ti suggeriamo di provare il servizio di assistenza tecnica di SOS WP.

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!

Guide correlate:

Immagine di Andrea Di Rocco autore articoli SOS WP
Andrea Di Rocco Fondatore di SOS WP™
La mia passione per WordPress mi ha portato negli ultimi 10 anni a voler aiutare sempre più persone a creare blog e siti web in WordPress in completa autonomia. Spero che troverai utili le oltre 700 guide su WordPress e sulla SEO che ho pubblicato su questo blog. Se ne hai voglia ti invito a leggere la mia storia, cliccando sul pulsante qui sotto.
49Commenti
Lascia un commento
  1. Immagine avatar per Cristina
    Cristina

    Ciao, ho WP posseduto… mi spiego… scrivevo i miei articoli con carattere calibri, che è poi improvvisamente scomparso senza che io facessi niente e al suo posto c’è un carattere apple-system, che io non ho messo. Adesso il sito non visualizza più i font che avevo scelto qualche anno fa, ma visualizza un anonimo font, credo tipo arial… che può essere successo? Come ripristinare? Ho già provato un backup ma niente… grazie mille

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Cristina, WordPress, il tema e i plugin sono tutti aggiornati? Che tema usi?

    2. Immagine avatar per Cristina
      Cristina

      Ciao, si wp e plugin tutto aggiornato. Oddio il tema no perché all’inizio, colpa la mia inesperienza, ho fatto tutto sul tema padre senza aggiungere il child per cui ho lasciato così. Il tema l’avevo comprato su themeforest, è il Kale… dici che non averlo aggiornato può aver portato a questo caos di font??? So che siteground ha fatto dei cambiamenti interni, non so se potrebbe essere stato questo…

    3. Immagine avatar per SOS WP Team
      SOS WP Team

      In tal caso ti suggerisco di contattare la nostra Assistenza WordPress, così i nostri tecnici potranno dare un’occhiata dall’interno per capire cosa stia causando il problema. Restiamo a disposizione!

  2. Immagine avatar per Mariano Sala
    Mariano Sala

    Ciao Andrea,
    da un analisi mi sono accorto che il titolo del sito e il motto vengono visti come H1, e questo è un problema perchè risultano troppi h1 che si ripetono per tutte le pagine. Come posso modificare? Grazie

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Mariano, che tema stai usando?

  3. Immagine avatar per Nicholas Marmonti
    Nicholas Marmonti

    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.

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Certo Nicholas 🙂 grazie della tua integrazione. Al prossimo aggiornamento del post inseriremo un paragrafo al riguardo. Un saluto!

    2. Immagine avatar per Walter
      Walter

      Nicholas, come si caricano i file tff sul server?

    3. Immagine avatar per Nicholas
      Nicholas

      La soluzione più semplice è via FTP o attraverso il File Manager (se il tuo hosting lo prevede).

    4. Immagine avatar per Walter
      Walter

      “We do not allow FTP (File Transfer Protocol) access to any WordPress.com blogs for security reasons.” … :((

    5. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Purtroppo Walter su WordPress.com non hai accesso FTP 🙁 Leggi in questa guida tutte le differenze tra WordPress.com e WordPress.org.

  4. Immagine avatar per Nicola
    Nicola

    Buongiorno,
    non riesco ad inserire il font concielian alpha, perchè non presente ne in plug in ne in google font
    potete aiutarmi
    grazie

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Nicola, testa il plugin https://it.wordpress.org/plugins/use-any-font/.

  5. Immagine avatar per andrea
    andrea

    Salve!
    Vorrei sapere è possibile avere in una pagina oppure in un articolo 2 font differenti?

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Andrea, è possibile lavorando sul CSS: https://sos-wp.it/modificare-css-singola-pagina-wordpress/.

  6. Immagine avatar per massimo defilippo
    massimo defilippo

    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

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Massimo, hai ispezionato il codice con il css https://sos-wp.it/guida-css/ ?

    2. Immagine avatar per massimo defilippo
      massimo defilippo

      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

    3. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Massimo, dove hai inserito le tue modifiche al CSS?

    4. Immagine avatar per massimo defilippo
      massimo defilippo

      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

    5. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ti sei ricordato di pulire la cache del browser?

    6. Immagine avatar per massimo defilippo
      massimo defilippo

      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?

    7. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Massimo, sì. Se hai dubbi scrivici a info@sos-wp.it. Hai attivato la nostra Assistenza WordPress?

    8. Immagine avatar per massimo defilippo
      massimo defilippo

      Non so cosa sia.

    9. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Massimo, dai un’occhiata qui https://sos-wp.it/assistenza-wordpress/. 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?

  7. Immagine avatar per marco
    marco

    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 🙂

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao, il sito è in remoto? Oppure in locale?

    2. Immagine avatar per marco
      marco

      in remoto

    3. Immagine avatar per marco
      marco

      Ciao Andrea, volevo sapere se è possibile risolvere il problema…

    4. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Dovresti lavorare sul foglio di stile, individuando le classi sui cui agire per modificare la grandezza: https://sos-wp.it/guida-css/.

  8. Immagine avatar per Daniele
    Daniele

    Ciao Andrea. Avrei bisogno di sapere se è possibile usare due font diversi in un’unica scritta. Nella schermata principale del sito http://www.marcheinvideo.com vorrei scrivere MARCHE IN VIDEO come nel logo, ossia MARCHE in VIDEO. Quindi con due caratteri diversi.E’ possibile? Mi sapresti dire come posso fare? Non ci riesco in quanto se clicco sul testo con il tasto destro e vado su “ispeziona” tutto il testo in questione va sotto slideshow_title.

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Daniele, puoi comunque lavorare con il css, e scrivendo un comando di stile inline. Scrivi al nostro reparto servizi https://sos-wp.it/servizi-web/, possiamo farlo noi.

  9. Immagine avatar per Mimmo
    Mimmo

    Ciao Andrea,
    spero riesci ad assistermi.
    Io ho modificato il font del mio tema wordpress seguendo questo persona che purtroppo non riesco a contattare: https://www.robertoiacono.it/come-inserire-font-personalizzato-in-un-blog-wordpress/
    Ti premetto che ho anche creato il temachild del mio tema ma le modifice apportate per il font sono state inserite nel tema padre.
    Poi da WordPress attivo il tema child e funziona, con il font da me inserito.
    problema nasce al momento che viene aggiornato il tema padre di wordpres.
    Che tutte le modifiche per questo nuovo font son scomparse.
    E debbo rifare il tutto.
    Purtroppo non riesco a capire cosa e’andato storto.

    Attendo un tuo riscontro.

    Grazie
    Mimmo

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Mimmo, le modifiche per il font devi collegarle al tema figlio, non al tema padre. Altrimenti, le perderai ad ogni aggiornamento.

  10. Immagine avatar per Laura Barbera
    Laura Barbera

    Ciao Andrea,
    sono finita qua, sul tuo chiarissimo articolo, perchè di punto in bianco il sito ha cambiato i font che io avevo scelto attraverso le impostazioni del tema. Il problema è che se apro la finestra typography del mio tema per cambiare nuovamente i font, noto che sono selezionati sempre quelli che avevo scelto io. Ho provato anche a sostituirli con altri ma sul sito si vedono sempre quelli di default del tema. Allora ho letto il tuo articolo e ho scaricato il plug-in. Il problema è che adesso, cambiando tutti gli H e il paragrafo, noto che i titoli del menu in alto e altri titoli degli articoli del blog, non cambiano, rimangono sempre i soliti anche se gli ho impostati come volevo io. Mi sapresti aiutare? da cosa può dipendere? Grazie infinite

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Laura, WordPress è correttamente aggiornato? Un saluto!

    2. Immagine avatar per Laura Barbera
      Laura Barbera

      Ciao Andrea!! Sí è aggiornato all’ultima versione! Il mistero si infittisce

    3. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Anche i plugin, e il tema?

    4. Immagine avatar per Valentina
      Valentina

      Ciao!! Finalmente ho finito di creare la mia pagina con wordpress, è stato difficile ma ce l’ho fatta. Ora ho un problema: voglio cambiare l’allineamento del testo…su elementor mi appare cambiato, però quando salvo tutto e vedo la pagina da un altro pc non mi appare cambiato. C’ho provato e riprovato mille volte, non trovo soluzione. Mi potete aiutare? Grazie

    5. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Valentina, hai pulito la cache del browser?

    6. Immagine avatar per Valentina
      Valentina

      si..ho pulito la cache, ho provato e riprovato…niente

    7. Immagine avatar per SOS WP Team
      SOS WP Team

      Contatta allora la nostra Assistenza WordPress da questo link https://sos-wp.it/assistenza-wordpress/ per una pronta risoluzione del problema.

  11. Immagine avatar per Andrea1
    Andrea1

    Ciao Andrea,
    premetto che non sono un esperto, ma se andassi ad incollare il Google Font nel file header.php, non si cancella al primo aggiornamento?
    Perché il tema child mi permette di lavorare solo su editor con style.css.
    Ti ringrazio,
    ciao
    Andrea

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Andrea, puoi lavorare sul child anche con il file header.php. In questo modo, gli aggiornamenti non cancelleranno le modifiche al font.

    2. Immagine avatar per Andrea
      Andrea

      Ciao Andrea,
      nell’area ASPETTO/EDITOR del mio sito wordpress, utilizzando un tema child, trovo solo i file functions.php e style.css.
      Devo selezionare il tema “padre” per apportare modifiche al file header; ma facendo ciò non si cancella al prossimo aggiornamento?
      Ti chiedo perché non so come funziona, non essendo un esperto.
      Ti ringrazio in anticipo,
      Andrea

    3. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Andrea,
      puoi creare un file header.php e inserirlo nel tema child.

  12. Immagine avatar per Andrea
    Andrea

    Buongiorno Andrea,
    io sto lavorando sul tema Storefront child.
    Ho scaricato il plugin Easy Google Font ma non mi permette di cambiare tutto; ad esempio il colore e la dimensione del font non posso modificarli.
    Mi sapresti aiutare?
    Vorrei provare ad inserirlo manualmente tramite codice, ma ho dei dubbi:
    – Il file header.php sul quale dici di incollare il font google, lo trovo solo nel tema “padre” non “child”, giusto?
    – Non si cancella al primo aggiornamento?
    Perdonami ma non sono esperto in materia.
    Ti ringrazio in anticipo,
    Andrea

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Andrea, sicuro che tu non possa modificare il colore con il plugin? Ti consiglio di riprovare. Per fare modifiche al tema, senza perderle al prossimo aggiornamento, ti consiglio di usare un tema Child.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *