Di Riccardo Esposito | Pubblicato il
Hai diverse soluzioni per cambiare font su WordPress. La più semplice: se il tuo tema WordPress supporta la personalizzazione dei font, vai su Aspetto e poi clicca su Personalizza. Cerca la sezione Tipografia o Fonts per intervenire.
Quando scegli il tema del tuo sito web WordPress hai la possibilità di valutare anche quale font utilizzare per il blog, l’home page e le pagine dei servizi. Non è detto, però, che le soluzioni di default siano quelle ideali per il tuo progetto web. Anzi, spesso è una buona idea cambiare il carattere WordPress utilizzato di default per diversi motivi.
Il principale è sicuramente quello che ti spinge a migliorare la leggibilità dei testi e preferire un Sans Serif al posto del classico Serif con grazie. Tipo il Time New Romans, sempre valido ma troppo classico in determinate occasioni. La buona notizia è questa: cambiare font è facile su WordPress, ecco alcune soluzioni utili in ogni situazione.
Indice dei contenuti
I metodi per cambiare font su WordPress
Iniziamo con una carrellata di soluzioni utli per chi vuole subito intervenire sul proprio layout e modificare il font di un blog o un sito web creato su WordPress. Ci sono soluzioni semplice e altre più complesse. Vediamole tutte (ci sono 3 metodi, lo anticipo).
Modifica del font attraverso il tema
Il modo più semplice e veloce per cambiare il carattere dei testi sul tuo sito internet. Basta andare nella dashboard del tuo portale WordPress e selezionare la voce Aspetto. Qui hai l’opzione Personalizza che ti permette di entrare nell’editor estetico del sito.
A questo punto devi andare in Personalizza e infine in Tipografia. Nella maggior parte dei casi, hai la possibilità di modificare manualmente il font di ogni sezione, dal body copy agli heading. Ovvero, i vari H2 e H3 che dividono il contenuto pubblicato.
Una volta cliccato sulla matita, puoi scegliere la famiglia di font che preferisci utilizzare ma anche il peso, la dimensione e gli spazi di interlinea. Inoltre, puoi scegliere se utilizzare un font in corsivo o sottolineato. In modo da personalizzare ogni dettaglio.
Usa un plugin per cambiare font WordPress
Altra soluzione per modificare il carattere dell’intero sito su WordPress: sfruttare qualche estensione dedicata a questo compito. Ce ne sono diversi, uno dei migliori è sicuramente Fonts Plugin, la soluzione giusta per personalizzare il tuo portale internet.
La caratteristica fondamentale di questa soluzione: oltre a utilizzare i diversi Google Font, puoi caricare il carattere personalizzato che hai realizzato per il tuo brand. Così puoi differenziarti sul serio dai tuoi competitor anche nell’uso del carattere per i testi.
CSS personalizzato per cambiare i font in WordPress
Ecco una notizia interessante. Il CSS personalizzato ti offre controllo totale sui font del tuo sito WordPress. Per intervenire in questa direzzione e cambiare font WordPress evitando plugin o personalizzazioni preconfezionate, devi avere un minimo di competenza nell’uso di questi passaggi avanzati. Ecco come procedere:
- Accedi alla dashboard di WordPress.
- Vai su Aspetto e poi su Personalizza.
- Clicca su CSS aggiuntivo (o personalizzato).
- Qui puoi inserire il tuo codice CSS.
Ok, cosa devo inserire per modificare il font WordPress con il CSS? Il codice è molto semplice, ecco al soluzione ideale per cambaire il carattere dell’intero sito web.
body {
font-family: 'Helvetica', Arial, sans-serif;
}Come anticipato, con questa stringa puoi modificare il font principale dell’intero sito internet. Per modificare solo il carattere dei titoli ci sono altre combinazioni da utilizzare:
h1, h2, h3, h4, h5, h6 {
font-family: 'Georgia', serif;
}In questo caso stiamo cambiando il font ai vari elementi che utilizziamo per dividere il testo di blog post o pagine web in sezioni differenti. In questo modo il font può essere un elemento di design importante per creare una differenza tra i vari stli.
Come aggiungere i web font su WordPress
Questi metodi sono perfetti per cambiare font che rientrano in famiglie standard come Time New Romans o Verdana. Però in molti casi vuoi utilizzare dei caratteri non presenti nelle librerie standard. Come cambiare font caricando quello che preferisci?
In queste circostanze, deve aggiungere caratteri personalizzati su WordPress da librerie specifiche come Google Font. O da altre piattaforme come Adobe Fonts, FontSquirrel e fonts.com. Ora, molti decidono di caricare i caratteri richiamandoli alto codice da fonti esterne. Di sicuro è l’opzione più veloce ma non la più performante. Secondo GTmetrix:
This method causes the browser to load each CSS file sequentially, rather than in parallel. Since CSS is render-blocking, by default, this is likely to affect page performance. Avoid using CSS @import to speed up your page load and improve your visitors’ page experience.
Quindi, questa soluzione può rallentare il tuo sito web. La soluziome che preferisco: ospitare i font che voglio utilizzare sul mio server Scarica i file dei font (.woff2, .woff, .ttf, .eot, .svg) da siti come Google Fonts, Adobe Fonts o altre librerie. Evitando di utilizzare @import nel foglio di stile. Ora devi seguire questa procedura:
- Crea cartella wp-content/themes/tuo-tema/fonts/
- Usa FTP o il File Manager per caricare il font.
- Dichiarare il carattere con @font-face nel CSS.
- Aggiungere il font nel CSS personalizzato.
Facciamo qualche passo indietro per spiegare meglio come cambiare font. La dichiarazione deve avvenire nel file style.css del tuo tema WordPress in questo modo:
@font-face {
font-family: 'NomeTuoFont';
src: url('fonts/nomefont.woff2') format('woff2'),
url('fonts/nomefont.woff') format('woff'),
url('fonts/nomefont.ttf') format('truetype');
font-weight: normal;
font-display: swap; /* Migliora la performance */
font-style: normal;
}
/* Applicare il font agli elementi */
body {
font-family: 'NomeTuoFont', sans-serif;
}Poi, vai sulla dashboard di WordPress, clicca su Aspetto e Personalizza. Scegli l’opzione per inserire CSS aggiuntivo (o personalizzato). La soluzione è diversa rispetto alle opzioni precedenti per personalizzare il tuo font su WordPress:
@font-face {
font-family: 'NomeTuoFont';
src: url('/wp-content/themes/tuo-tema/fonts/nomefont.woff2') format('woff2');
font-weight: normal;
font-display: swap;
font-style: normal;
}Utilizza i blocchi Gutenberg per cambiare font
Altra soluzione ideale per modificare il testo su WordPress: puo utilizzare l’editor Gutenberg che non ti consente di utilizzare un carattere diverso. Ma puoi effettuare delle modifiche al modo in cui si presenta la scrittura. Ad esempio hai la possibilità di:
- Aumentare la dimensione del carattere.
- Modificare la formattazione.
- Utlizzare un colore differente.
Questa soluzione può essere comoda per dare delle caratteristiche differenti a un blocco di testo. Ma, in linea generale, conviene sempre intervenire a livello si sito web se vuoi dare uno stile uniforme a tutte le sezioni dei contneuti che pubblichi online.
Come cambiare font e ottimizzare WordPress
C’è un altro aspetto da considerare: non sempre il cambio font sul sito web WordPress è indolore dal punto di vista delle prestazioni. Questo passaggio può implicare diverse novità in termini di user experience. Anche la SEO può essere influenzata da questo parametro. Perché puoi minare la leggibilità con una decisione azzardata.
Quello che ti consiglio è di scegliere sempre font noti, che rimandano a famiglie di caratteri riconoscibili e testi come il classico Arial, il Time New Romans o l’Helvetica. Io preferisco sempre il sans serif, più pulito ed elegante. Ma ci sono una serie di parametri tecnici da rilevare per fare in modo che il cambio font sia indolore:
- Usa font di sistema – I system fonts (tipo Arial, Georgia, Verdana) sono già installati nei dispositivi degli utenti, quindi non richiedono download aggiuntivi. Questo è l’approccio più leggero in assoluto.
- Precarica solo i font necessari – Se usi i Google Fonts devi fare attenzione a questo passaggio. In realtà puoi precaricare i font che ti servono facilmente, con l’attributo
preconnectopreloadnel del tema. - Sacarica i font localmente – Fai download dei font e caricali nella directory del tuo tema (che ad esempio può rispondere al nome di
/fonts). Poi dichiarali nel CSS. Evita troppi stili o pesi
Ci sono altri dettagli da valutare? Certo, iniziamo dal font-display: swap che migliora le prestazioni rendendo visibile il testo anche se il font non è ancora stato caricato.
Categoria: WordPress