Come Cambiare i Font in WordPress (+ Cambiare Dimensione e Colore e Ottimizzarli)

I font possono fare la differenza tra un sito web noioso e uno bello da vedere. Imparando a cambiare font in WordPress, potete rendere il vostro sito moderno, professionale e di marca.

Ma qual è il modo migliore per utilizzare i font nel vostro sito WordPress, e come scegliere i font giusti per il vostro design?

In questa guida, vi mostrerò tutto quello che c’è da sapere sui font in WordPress. Ecco cosa imparerete:

Font: la Terminologia

Cominciamo osservando la terminologia riguardante i font sul web.

• I web font (font HTML) sono font ospitati su un sito web di terze parti e collegati al vostro sito.
• I font ospitati localmente si descrivono da soli (e sono ospitati sui server del vostro sito web.)
• I web font -safe sono una gamma limitata di font preinstallati su (quasi) tutti i computer e ai quali potete essere sicuri che tutti i vostri visitatori avranno accesso.

Diamo un’occhiata alle opzioni per aggiungere font al vostro sito web.

Come Aggiungere Font al Vostro Sito WordPress (le Opzioni)

Prima di aggiungere font al vostro sito, è utile capire le opzioni a vostra disposizione.

I font fanno parte del design del vostro sito, quindi, nella maggior parte dei casi, saranno codificati tramite il vostro tema, ma non sempre. In alcuni casi, si potrebbe decidere di utilizzare un plugin per abilitare una gamma più ampia di font nel proprio sito.

Ecco alcune delle opzioni disponibili:

• Utilizzare web font come Google Fonts installando un plugin che vi dà accesso.
• Usare i web font codificandoli nel tema e accodandoli (non è così complicato come sembra).
• Ospitare i vostri font sul vostro sito e aggiungerli al vostro tema.

Ci sono due distinzioni principali: se si utilizzano web font, che sono ospitati al di fuori del sito, o se si sceglie di ospitare i file di font da soli. In questa guida, esamineremo i pro e i contro di entrambe le opzioni.

Cominciamo a guardare i web font: perché sceglierete di utilizzarli e i modi per aggiungerli al vostro sito.

Utilizzo dei Web Font in WordPress

I web font sono il modo più popolare per aggiungere font al vostro sito web perché facilitano l’aggiunta di una vasta gamma di font.

Cosa Sono i Web Font?

I web font sono font ospitati sul sito web di un fornitore terzo. Invece di copiare i file sul vostro sito, vi collegate al sito web del provider e da lì vengono estratti.

Questo significa che si ha accesso a una vasta gamma di font senza dover utilizzare lo spazio server sul proprio hosting. Significa anche che, se i file di font dovessero cambiare nel tempo, non sarà necessario aggiornare i file e avrete automaticamente accesso alle nuove versioni dei file dal provider.

I web font possono essere gratuiti o a pagamento, di solito tramite abbonamento. Alcuni fornitori popolari sono:

• Google Fonts. Il più grande fornitore di web font gratuiti: potete anche scaricare tutti i loro font sul vostro computer, il che significa che se volete creare materiali offline usando gli stessi font del vostro sito web, potete farlo. Ed è tutto gratis.
• Adobe Edge Web Fonts. Anche questi sono gratuiti. Mentre sono progettati per essere utilizzati con i prodotti Adobe, funzionano bene su qualsiasi sito web.
• Fonts.com è un fornitore premium di font, che potrebbe essere necessario utilizzare se dovete abbinare il web font al font di materiale stampato e questo non è disponibile tramite un fornitore gratuito.
• fontfabric è un font designer che fornisce font premium da utilizzare come web font e online. Questi sono a pagamento, ma otterrete qualcosa di più personalizzato rispetto ai Google Fonts.

Tutti questi fornitori vi permettono di servire i font direttamente dai loro server aggiungendo del codice al vostro sito WordPress o, a volte, utilizzando un plugin, il che significa che non dovete aggiungere alcun codice.

I web font sono diversi dai web-safe fonts. Potete usarli come fallback per i web font solo nel caso in cui il visitatore del vostro sito web non possa connettersi al web font per qualche motivo. Più avanti vi mostrerò come fare.

Perché Usare i Web Font?

Quindi, ora che sapete cosa sono i web font, perché dovreste scegliere di usarli invece di ospitare i vostri font?

Ecco alcuni dei benefici:

• Facilità: aggiungere alcune righe di codice o installare un plugin è più veloce che scaricare e caricare i file dei font. Rende anche più facile cambiare i font se decidete di farlo in futuro.
• Gamma di font: ci sono migliaia di font disponibili come web font e l’elenco è in continua crescita.
• Aggiornamenti: Se il file di font ha bisogno di essere aggiornato, magari per aggiungere font variabili (ne parliamo a breve) o per aggiungere font extra, il vostro sito avrà accesso alla nuova versione senza che voi dobbiate fare nulla.

La maggior parte dei siti web utilizza web font, con un web-safe font di backup. E con WordPress è molto facile da fare.

Trovare i Migliori Web Font per il Vostro Sito

Avendo deciso di utilizzare web font, ora avete una decisione difficile: quali font utilizzare?

Durante i bei tempi in cui tutti gli sviluppatori web avevano accesso ai font preinstallati e sicuri per il web, questa era una decisione molto semplice. Volevate usare un font serif o sans-serif? (I font Serif hanno, in ogni carattere, una piccola linea o un tratto alla fine di un tratto più grande, mentre i font sans-serif no.) Una volta presa questa decisione, le vostre scelte erano molto limitate.

Ma ora avete di che sbizzarrirvi.

Ecco alcuni suggerimenti per aiutarvi a scegliere il font migliore per il vostro sito:

• Guardate il vostro materiale stampato. State già usando font che si possono trovare come web font? In caso contrario, potete trovare qualcosa di simile?
• Guardate i siti web dei vostri concorrenti. Che tipo di font stanno usando? Non vi consiglio di copiarli, ma ci possono essere alcuni stili che trasmettono il giusto tipo di immagine agli utenti del vostro sito web.
• Pensate a che tipo di sensazioni volete trasmettere con i vostri font. Alcuni sembrano più moderni, altri più tradizionali. Alcuni sono divertenti, altri più seri.
• Attenetevi ai font che sono facili da leggere per il corpo del testo e, se volete, usate font più interessanti per i titoli.
• Scegliete tra i più popolari font di Google – questi risulteranno familiari ai visitatori del sito web e sono facili da leggere.

Una volta scelti i font, fate qualche test. I fornitori di font come Google Fonts consentono di digitare testo personalizzato per vedere come appare nel font scelto. Una volta che vedete il vostro testo con il font scelto, potreste più facilmente capire se quello è il font giusto per voi.

E ricordate: usare web font rende molto facile cambiare i font in modo da poter sempre passare ad un’altra opzione mentre state sviluppando il tema o impostando il sito.

Come Aggiungere i Web Font con un Plugin WordPress

Ora che avete scelto il vostro font, è il momento di aggiungerlo al vostro sito.

Se non vi sentite a vostro agio nell’aggiungere codice ai file del tema, potete installare un plugin che vi permetterà di accedere a Google Fonts e utilizzare qualsiasi font che volete sul vostro sito.

Il plugin Google Fonts Typography vi dà accesso all’intera libreria di font di Google e vi permette di esaminarli tramite il WordPress Customizer.

Installate il plugin sul vostro sito proprio come qualsiasi altro plugin, e poi attivatelo.

Andate su Appearance > Customize per accedere al Customizer. Vedrete una sezione chiamata Google Fonts.

Fate clic su quel link per accedere alle impostazioni dei vostri font. Configurate come segue:

Impostazioni di base: configurate il font predefinito per il corpo del testo, per le intestazioni, e per i pulsanti. Nello screenshot qui sotto potete vedere che ho aggiunto un font serif di facile lettura per il corpo e un font più distintivo per le intestazioni.

Impostazioni avanzate: qui è possibile configurare il branding (titolo e descrizione del sito), la navigazione (il menu), i contenuti e le intestazioni in dettaglio, la barra laterale e il footer. Potete anche caricare font senza assegnarli a nessun elemento, il che significa che potete aggiungerli a qualsiasi CSS personalizzato nel Customizer.

Caricamento dei font: se ci sono dei font weight di cui non avete bisogno (ad esempio, grassetto, corsivo, etc.), potete deselezionarli qui in modo che non rallentino inutilmente il vostro sito.

Debug: utilizzate questa opzione per forzare la visualizzazione di qualsiasi font, se non funziona come dovrebbe.

Investite un po’ di tempo per lavorare con queste impostazioni e testarle nel Customizer per assicurarvi che funzionino nel modo desiderato. Poi, quando siete soddisfatti delle vostre impostazioni, fate clic sul pulsante Publish. Non uscite dal Customizer senza far clic su Publish, o perderete le vostre modifiche.

Modifica dei Colori dei Font

La versione gratuita del plugin non consente di modificare i colori dei font. Per farlo, dovrete acquistare la versione premium o utilizzare l’opzione CSS aggiuntivo nel Customizer.

Tornate alla schermata iniziale del Customizer e fate clic sulla scheda CSS aggiuntivo. Vedrete un’area di testo vuota dove potrete aggiungere i vostri CSS.

Per trovare l’elemento di cui avete bisogno per lo stile, selezionatelo e usate l’ispettore di codice nel vostro browser per scoprire quale stile di colore è già presente.

Qui sotto sto usando Google Chrome e sto ispezionando un elemento h1.

Nel mio tema WordPress, il colore è ereditato da quello del body. Voglio aggiungere qualcosa di più specifico. Nell’area di testo del vostro CSS, inserite i CSS per il vostro elemento e il colore che volete usare.
Il mio assomiglia a questo:

h1 {
 color: #f542f5;
}

Così ottengo un H1 rosa brillante:

Potete ripetere l’operazione con tutti gli elementi di testo a cui desiderate aggiungere il colore, e anche a tutti i font personalizzati che non sono stati inclusi nelle opzioni delle altre schermate. Se volete sapere quali CSS utilizzare per i font, leggete il paragrafo di questo post dedicato alla modifica dei vostri font tramite CSS.

Come Aggiungere Manualmente i Web Font

Se non volete aggiungere un plugin extra al vostro sito e avete accesso al codice del vostro tema, potete installare e utilizzare i web font aggiungendo del codice al vostro file functions e al vostro foglio di stile.

Se il vostro sito utilizza un tema personalizzato che potete modificare, allora potete mettere mano al file delle funzioni e al foglio di stile dal vostro tema. Ma se utilizzate un tema di terze parti che avete acquistato o scaricato dalla directory dei temi WordPress, allora avrete bisogno di creare un child theme. Avrete quindi bisogno di due file: functions.php e style.css.

Vediamo come aggiungere manualmente i web font al vostro tema. Per questo esempio lavorerò con Google Font, in quanto questo è il più comunemente usato ed è gratuito.

Scegliere un Font e Copiare il Link

Iniziate scegliendo il vostro font da Google Fonts. Aggiungetelo alla vostra libreria facendo clic sull’icona più accanto ad esso.

Fate clic sulla scheda nella parte inferiore dello schermo della vostra libreria e troverete alcuni codici da aggiungere al vostro sito. Se desiderate aggiungere font weight e stili extra, fate clic sulla scheda Customize e selezionate quelli desiderati. Poi tornate alla scheda Embed.

Non copiate il codice tale e quale: lo userete, ma invece di chiamare il font nella sezione <head> dell’intestazione del vostro sito, accoderete i font. Questo è il modo corretto per aggiungerli in WordPress.

Invece, dalla sezione Embed font, copiate solo il link al font.

Quindi, nel mio caso, Google Fonts mi sta dando questo codice:

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

Devo solo copiare questa parte:

https://fonts.googleapis.com/css?family=Raleway

Accodare i Font

Aprite il file function del vostro tema e aggiungete quanto segue, sostituendo il link del mio font con il link che Google vi ha dato per il vostro:

function kinsta_add_google_fonts() {
 wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Raleway');
 wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );

Questa funzione accoda lo stile dai server di Google Fonts. Se in futuro vorrete aggiungere altri font, potete o aggiungere una nuova riga alla funzione oppure inserirla nella stessa riga, in questo modo:

function kinsta_add_google_fonts() {
 wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Merriweather|Raleway');
 wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );

In questo modo potete inserire sia il font Merriweather che il Raleway.

Aggiungere i Font al Vostro Foglio di Stile

Il processo che abbiamo visto non farà funzionare ancora i font nel vostro sito: dovete ancora aggiungerli al foglio di stile del vostro tema.

Aprite il file style.css del tema e aggiungete il codice per dare uno stile ai singoli elementi con i vostri web font. Assicuratevi di aggiungerlo dopo qualsiasi CSS esistente per i font, o potrebbe essere sovrascritto.

Gli elementi ai quali aggiungere uno stile li sceglierete voi; di solito è preferibile usare un font leggibile per il corpo del testo e qualcosa di più originale per le intestazioni.

body {
 font-family: 'Raleway', sans-serif;
}

h1, h2, h3 {
 font-family: 'Merriweather', serif;
}

Nel caso qui sopra, tutti gli elementi di testo nella pagina useranno il font Raleway, ad eccezione degli elementi h1, h2 e h3, che useranno Merriweather.

Ora, salvate il foglio di stile e controllate il vostro sito per assicurarvi che tutto funzioni come previsto. Se i nuovi font non vengono visualizzati, provate a cancellare la cache del browser e controllare che i font non siano sovrascritti dallo stile di qualche font più in basso nel foglio di stile. Questo è il motivo per cui è una buona idea aggiungere il nuovo stile in fondo al foglio di stile o sostituire lo stile del font esistente con il nuovo (ancora meglio).

Aggiungere i Font di Backup

Può capitare che qualcuno visiti il vostro sito e, per qualche motivo, non riesca ad accedere ai web font. Forse si trovano su una connessione scadente o usano un vecchio dispositivo che non rende i web font. O forse il vostro fornitore di web font sta avendo dei problemi tecnici.

Per questo motivo, è una buona idea avere sempre un backup.

Il codice che vi viene fornito dai font di Google include già un backup di serif e sans-serif, ma possiamo fare un passo avanti.

Utilizzate uno dei font web-ready che saranno già installati sul computer di chi vi visita, e poi includete il secondo fallback di serif o sans-serif, nel caso in cui stiano utilizzando un dispositivo mobile che non supporta nemmeno i font web-ready.

Tornate al vostro foglio di stile e modificate il vostro CSS in questo modo:

body {
 font-family: 'Raleway', Helvetica, sans-serif;
}

h1, h2, h3 {
 font-family: 'Merriweather', Georgia, serif;
}

Questo significa che le persone che visitano il vostro sito vedranno i vostri web font se tutto va bene; ma se non va bene, vedranno Helvetica o Georgia, o in mancanza, qualsiasi altro font serif e sans-serif che il loro browser è in grado di caricare.

Ospitare i Vostri Font in WordPress

Alcuni sviluppatori preferiscono non usare web font, ma ospitare i font sui propri server e voi potresti essere uno di loro.

Ci sono vari motivi per fare questa scelta, tra cui la sicurezza, le prestazioni o il budget.

Se vi preoccupano le prestazioni, potete ottimizzare le prestazioni dei vostri web font in diversi modi, come vedremo più avanti in questo post. Ma se avete deciso di ospitare tutto in locale, dovete sapere come fare.

Perché Ospitare i Font?

L’uso dei web font è spesso più facile e può darvi maggiore flessibilità e occupare meno spazio sul vostro server. Ma questo non significa che non ci siano occasioni in cui l’hosting locale dei font potrebbe essere più appropriato.

Fra ragioni per cui potreste voler ospitare i font a livello locale:

• Potreste preferire non attingere a risorse di fornitori terzi per motivi di sicurezza, così potete davvero essere gli unici a controllare la sicurezza del vostro sito.
• Potreste scoprire che l’utilizzo di un servizio di terze parti ha un impatto sulle prestazioni del vostro sito.
• Potreste aver comprato font e ora volete usarlo. Assicuratevi che la vostra licenza includa l’uso per siti web e materiale stampato.
• Il vostro sito potrebbe essere ospitato localmente, ad esempio su una intranet, e gli utenti non avranno accesso ai web font quando lo utilizzano.

Dove Trovare i Font da Ospitare Localmente

Molti web font possono anche essere scaricati per essere utilizzati come font ospitati localmente, ma dovrete controllare che ciò sia permesso dalla licenza. Nel caso di Google Fonts, è consentito.

Troverete anche dei font non disponibili come web font che potete scaricare e ospitare voi stessi. Qualsiasi file di font che potete scaricare sul vostro computer può anche essere caricato sul vostro sito web e memorizzato lì. Se per il branding del vostro sito avete bisogno di utilizzare un font che non è disponibile come web font, scegliete questa soluzione, ma assicuratevi che la licenza lo permetta.

Come Aggiungere Caratteri Ospitati Localmente al Vostro Sito WordPress

Ora che sapete che volete ospitare i vostri font localmente, come fate a configurarli?

Il processo è diverso dall’uso dei web font. Dovete caricare i file di font sul vostro sito e collegarvi ad essi nel vostro foglio di stile senza doverli inserire nel vostro file functions.

Scaricate e Convertite i Font

Iniziate scaricando i font che desiderate utilizzare. In Google Fonts, è possibile farlo cliccando sull’icona di download quando si visualizza il font nella propria libreria.

Decomprimete il file del font sul vostro computer e cancellate i font weight che non sono necessari per il vostro sito: non ha senso caricare file che non utilizzerete.

Per poter essere utilizzati sul vostro sito web, i file dovranno essere in formato . woff. Se non lo sono (e non lo saranno, se li ottenete dai font di Google), potete usare un servizio come Convertio per convertirli.

Caricate i Font sul Vostro Tema

Ora caricate il file del font sul vostro tema, in wp-content/themes/themename, dove themename è la cartella del vostro tema. È una buona idea salvare ogni file di font in una cartella dedicata del tema, per esempio in una cartella font.

Se state lavorando con un tema di terzi, create un child theme per i vostri font e il vostro foglio di stile.

Una volta fatto questo, aggiungete il font al foglio di stile.

Aggiungere i Font in CSS

Aprite il foglio di stile del tema.

Aggiungete un codice come questo, sostituendo i font che ho usato con i vostri:

@font-face {
 font-family: ‘Raleway';
 src: url( “fonts/Raleway-Medium.ttf”) format(‘woff’); /* medium */
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: ‘Raleway';
 src: url( “fonts/Raleway-Bold.ttf”) format(‘woff’); /* medium */
 font-weight: bold;
 font-style: normal;
}

@font-face {
 font-family: ‘Merriweather';
 src: url( “fonts/Merriweather.ttf”) format(‘woff’); /* medium */
 font-weight: normal;
 font-style: normal;
}

Aggiungete tutto quello che vi serve. Notate che se volete usare le variazioni di grassetto, corsivo, ecc. del vostro font, dovete dichiararle una per una usando @fontface e poi specificare lo stile per ciascuna variazione, come ho fatto sopra con Raleway per lo stile grassetto e normale.

Ora aggiungete lo stile per i vostri elementi, come fareste se usaste i web font:

body {
 font-family: 'Raleway', Helvetica, sans-serif;
 src: url( “/fonts/Raleway-Medium.ttf” );
}

h1, h2, h3 {
 font-family: 'Merriweather', Georgia, serif;
}

I font ospitati localmente ora funzionano con il vostro tema.

Come Cambiare i Font in WordPress

Ora sapete come installare i font nel vostro sito WordPress in uno dei due modi. Che ne dite di modificarli? E se li cambiassimo?

È possibile modificare i font in uno dei tre modi seguenti: tramite il Customizer, nella schermata di modifica dei post o della pagina, o utilizzando i CSS.

Vediamo ognuna di queste opzioni per cambiare lo stile, il colore e la dimensione del font.

Come Cambiare gli Stili del Font in WordPress

Vediamo come possiamo farlo sia che stiate usando il Block Editor o il Classic Editor.

Cambiare gli Stili di Font nel Block Editor (Gutenberg)

Se state usando una versione recente di WordPress con l’editor Gutenberg, potete cambiare lo stile del vostro testo quando lo modificate nel vostro post o pagina.

Selezionate il blocco che desiderate modificare e sopra di esso apparirà un menu di stile.

Selezionate il testo che volete modificare e quindi fate clic sulle icone per renderlo in grassetto o in corsivo. Facendo clic sulla freccia accanto alle icone, vedrete che è possibile selezionare anche lo stile barrato.

Modifica Degli Stili dei Font nell’Editor Classico

Se state usando una versione precedente di WordPress o avete installato il plugin Classic Editor, potete anche modificare gli stili dei font. (Se non volete l’editor di Gutenberg, è meglio aggiornare WordPress e disabilitare Gutenberg).

Il Classic Editor include una barra degli strumenti sopra il riquadro di modifica principale dove potete modificare gli stili del testo. Se fate clic sull’icona Toggle della barra degli strumenti a destra, è possibile accedere ad altre opzioni, tra cui lo stile barrato (strikethrough).

Modifica Degli Stili dei Font nel Customizer

Se desiderate modificare lo stile del font per un elemento specifico, potete farlo aggiungendo i CSS manuali al Customizer.

Aprite il Customizer e fate clic su Additional CSS. Si aprirà una schermata in cui dovrete digitare il CSS.

Ora potete digitare nel box il CSS per i vostri font. Se voleste convertire tutti gli elementi h1 e h2 al corsivo, dovreste aggiungere questo CSS:

h1, h2 {
 font-style: italics;
}

Modifica Degli Stili del Font nel Foglio di Stile

Se non avete problemi a inserire del codice nel vostro foglio di stile, questo metodo è per voi.

Se utilizzate un tema di terze parti, create un child theme per aggiungere il vostro stile: se non lo fate, qualsiasi modifica apportata andrà persa quando aggiornerete il tema. Dovrete creare un foglio di stile nel child theme per dire a WordPress che si tratta, appunto, di un child theme: è lì che inserirete il vostro nuovo stile per i font.

Se state invece usando un tema vostro, potete modificare e modificare i CSS nel vostro foglio di stile. Il file è style.css e lo troverete nella cartella del tema, dentro wp-content/themes.

Aggiungete qualsiasi nuovo font styling alla fine del vostro foglio di stile in modo che non venga cancellato quelli già presenti. O meglio ancora, rimuovete e sovrascrivete qualsiasi font styling esistente, a meno che non vogliate mantenerlo.

Potete cambiare il font weight con la funzione font-weight:

span.featured {
 font-weight = bold;
}

O cambiare lo stile di un elemento con font-style:

span.featured {
 font-style = italic;
}

Potete modificare l’allineamento con text-alignment:

span.featured {
 text-alignment: center;
}

Come Cambiare i Colori dei Font in WordPress

Un altra personalizzazione che potreste voler fare è cambiare il colore di un certo testo nel vostro sito. Attenzione a non esagerare, però: il tema è stato progettato con colori che funzionano bene insieme e se aggiungete troppi colori, potrebbe sembrare pacchiano e poco professionale.

Cambiare i Colori dei Font in Gutenberg

I blocchi di testo di Gutenberg vi permettono di modificare il colore del testo e lo sfondo. Per farlo, aprite il blocco che desiderate modificare e fate clic sulla scheda Color Settings nella sezione Block a destra dello schermo.

Da qui potete modificare il colore di sfondo e il colore del testo per i blocchi di testo.

Notate che WordPress vi avvertirà se la combinazione di colori scelta non è idonea in termini di accessibilità, come nell’esempio che ho usato sopra. Evitate la tentazione di strafare con i colori: dopo tutto se avete scelto il tema è perché anche i colori del design erano appropriati per il vostro sito; l’aggiunta di molti altri colori potrebbe scadere sul pacchiano.

Se fate clic sulla scheda Advanced sotto la scheda Color Settings, potete anche aggiungere una classe a quel blocco, per poi personalizzarla nel Customizer o nel vostro foglio di stile. Quindi, per esempio, se aggiungete una classe .featured al blocco, potreste poi stilizzarlo usando quella classe.

Modifica dei Colori dei Font nell’Editor Classico

La classica barra degli strumenti dell’editor permette di cambiare il colore del testo selezionato. In questo modo potete selezionare una singola parola e cambiarne il colore. Qui sotto vedete come ho creato una una frase rossa.

Mentre questo, in teoria, vi dà molta flessibilità, fate attenzione a non strafare. Se iniziate ad aggiungere molti più colori al testo potreste renderne difficile la lettura e peggiorarne l’accessibilità.

Modifica dei Colori dei Font nel Customizer

Se il vostro tema include opzioni per cambiare la combinazione di colori del vostro sito, questo è il posto migliore per farlo.

Per esempio, nel sito qui sotto sto usando un tema che mi permette di scegliere una nuova combinazione di colori per l’intero tema. Questo aiuta a garantire che i nuovi colori lavorino bene insieme e siano coerenti.

Le opzioni per realizzare questa modifica variano a seconda del tema: alcuni temi vi permettono di cambiare il colore di intestazioni, link e altri elementi.

Se desiderate cambiare il colore di elementi specifici, ma il tema non vi offre l’opzione per farlo, potete aggiungere del CSS nel Customizer.

Selezionate Customize > Additional CSS e inserite i CSS nella casella di testo.

Per esempio, se volete cambiare il colore delle vostre intestazioni h1, digitate quanto segue:

h1 {
 color: #564534;
}

Se questo non funziona, potrebbe essere necessario aggiungere del CSS più specifico. Nel mio tema, il colore per il link all’intestazione del sito è codificato usando l’ID #site-title, quindi ho bisogno di aggiungere questo CSS:

#site-title a {
 color: #564534;
}

Sostituite il colore che ho usato sopra con il vostro colore.

Quando siete soddisfatti delle modifiche apportate, fate clic sul pulsante Publish.

Modifica dei Colori dei Font nel Foglio di Stile

Come per gli stili dei font, potete anche modificare il foglio di stile del tema (o creare un child theme) per cambiare i colori dei font.
Qui sotto sto cambiando il colore principale per il testo del mio sito, usando l’elemento body:

body {
 color = #222222;
}

Assicuratevi di sovrascrivere qualsiasi stile già esistente per gli stessi elementi; ricordate anche degli elementi che ereditano quello stile, se volete che abbiano un colore diverso. Tutto il testo erediterà il colore dell’elemento body, a meno che non abbia il proprio stile.

Cambiare le Dimensioni dei Font in WordPress

Per motivi di accessibilità, potreste decidere di voler avere caratteri più grandi di quelli predefiniti nel tema. Oppure potreste decidere che le intestazioni nelle aree del widget sono troppo piccole, per esempio.

Cambiare la Dimensione dei Font in Gutenberg

Con l’editor di Gutenberg è possibile modificare le dimensioni del testo all’interno di ogni blocco.

Selezionate il blocco e quindi fate clic sulla scheda Text Settings nel menu Blocks a destra dello schermo. È possibile rendere il testo nel blocco più piccolo o più grande, come mostrato di seguito.

Attenzione a non esagerare: se tutti i paragrafi della pagina sono di dimensioni diverse, il testo apparirà disgiunto e difficile da leggere.

Modifica della Dimensione dei Font nell’Classic Editor

Il Classic Editor non vi dà la possibilità di selezionare un testo specifico e cambiarne le dimensioni: quindi, se avete bisogno di questa funzione, dovreste passare a Gutenberg!

Modifica delle Dimensioni dei Font nel Customizer

A seconda del tema che usate, potete avere un’opzione per cambiare le dimensioni dei caratteri nel Customizer, sia cambiando la dimensione dei font per l’intero sito o puntando solo su intestazioni e corpo del testo.

Se il tema non include un’opzione nel Customizer per modificare le dimensioni dei caratteri, potete utilizzare l’opzione Additional CSS. Andate su Customize > Additional CSS e inserite il CSS nel box.

Ecco come uso il CSS per ingrandire le intestazioni nelle aree dei widget:

h2.widget-title {
 font-size: 3em;
}

Forse è un po’ troppo grande, ma vi dà un’idea generale.

Modifica della Dimensione dei Font nel Foglio di Stile

La modifica delle dimensioni dei font nel foglio di stile funziona in modo simile a qualsiasi altro stile per i font.

Se volete cambiare la dimensione di tutto il testo del vostro sito, userete l’elemento body.

body {
 font-size: 14px;
}

Per l’elemento body si usano i pixel, ma per gli altri elementi si usa em per cui la dimensione è relativa alla dimensione dell’elemento body.

h1,
#site-title {
 font-size: 2em;
}

Ricordate che, se avete intenzione di apportare modifiche ai font nel vostro foglio di stile del tema, è meglio testarli prima su un sito di sviluppo o di staging per non correre il rischio di rovinare il vostro sito live.

Come Ottimizzare i Font in WordPress

Che stiate usando web font o font ospitati localmente, ha senso fare tutto il possibile per ottimizzarli.

Qui vi darò alcuni suggerimenti per ottimizzare i font, sia per la velocità che per il design.

Ottimizzazione i Font per Migliorare le Prestazioni

Se state usando i web font sul vostro sito, dovrete fare tutto il possibile per assicurarvi che vengano mostrati nelle vostre pagine il più velocemente possibile e che il fatto che siano ospitati altrove non rallenti il caricamento.

• Usate il caching per assicurarvi che le pagine non debbano essere ricostruite ogni volta che vengono caricate. I piani di hosting Kinsta sono dotati di cache integrata.
• Utilizzare un provider di web font che fornisce i font tramite una Content Delivery Network o CDN. Google Fonts lo fa e questo velocizza il caricamento dei font.
• Usate solo i font di cui avete bisogno. Non inserite variazioni di font (font weight, stili) che non verranno utilizzati nel foglio di stile. Se ne avete bisogno in un secondo momento, potrete sempre aggiungerli.
• Se utilizzate web font, assicuratevi di accodarli correttamente. Non usate @import nel vostro foglio di stile, anche se questo è ciò che il vostro web font provider vi dice di fare.
• Quando aggiungete manualmente i CSS, fatelo nel foglio di stile del tema e non nella sezione <head> del file header.php. Questa è una delle ragioni per cui è meglio codificare manualmente i CSS nel tema piuttosto che usare il Customizer o un blocco, visto che entrambi aggiungeranno i CSS in linea nella pagina invece che nel foglio di stile.
• Considerate l’utilizzo dell’inlining CSS per guadagnare qualche millisecondo in più rispetto ai tempi di caricamento della pagina. Questo è un processo che usa la codifica base64 per aggiungere CSS dal vostro foglio di stile nella pagina prima del caricamento, così il browser non dovrà caricare file extra. Può sembrare controintuitivo considerato il consiglio precedente di non aggiungere i CSS inline, ma funziona comunque da un file CSS separato e non significa codificare manualmente i CSS inline. Se state caricando più font, l’inlining può velocizzare un po’ il vostro sito.
• Usate la minificazione per ridurre la dimensione del vostro foglio di stile. Potete farlo facilmente se siete clienti Kinsta grazie alla funzione di minificazione del codice che si trova proprio nel cruscotto MyKinsta. Questo permette ai clienti di abilitare la minificazione automatica di CSS e JavaScript con un semplice clic, velocizzando i siti senza alcuno sforzo.
• Se state ospitando i font localmente, caricate solo i file per i font, i font-weight e gli stili di font di cui avete bisogno. Aggiungete solo le variazioni necessarie usando la dichiarazione @font-face.
• Considerate la possibilità di utilizzare un CDN per ospitare i vostri font invece di ospitarli sul vostro server.
• Quando ospitate i vostri font, includete formati aggiuntivi: woff2, woff, ttf, ttf e eot. I browser possono così selezionare la versione che verrà caricata più velocemente.
• Se state usando un font diverso per il titolo del vostro sito, inserite solo i caratteri di cui avete bisogno al posto dell’intera libreria di font.

Quindi, se il titolo del vostro sito è Kinsta, potreste migliorare leggermente le prestazioni in questo modo:

function kinsta_add_title_font() {
 wp_register_style( 'googleFonts', ‘https://fonts.googleapis.com/css?family=Raleway&text=“kinsta');
 wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_title_font' );

Ottimizzazione dei Font per il Design

Oltre ad ottimizzare le prestazioni dei vostri font, ha anche senso assicurarsi che siano visivamente ottimizzati, cioè che si adattino bene al design del vostro sito e alle vostre risorse offline.

Questo è importante soprattutto se utilizzate un plugin o un child theme per aggiungere font extra oltre a quelli già inclusi nel tema. C’è il rischio che il vostro tema risulti disordinato, se ci sono troppi font in molteplici colori e stili.

Prima di aggiungere font aggiuntivi al vostro sito, considerate quanto segue:

• I nuovi font sono coerenti con i font esistenti? Trasmettono uno stile o uno stato d’animo simile?
• Se avete bisogno di abbinare un font che è stato usato per i materiali di stampa, ma non potete usare lo stesso web font, provate a trovare una corrispondenza il più possibile simile su Google Fonts.
• I font che avete scelto sono coerenti con il vostro marchio? Se state gestendo un business professionale, non dovreste usare il Comic Sans (di fatto, qualunque sia la natura del sito web che state gestendo, non dovreste voler usare il Comic Sans).
• Se state cambiando i colori dei vostri font, provate a utilizzare colori che sono già presenti nel design del vostro tema o che si coordinano con essi. L’aggiunta di troppi colori renderà il vostro sito pacchiano e poco professionale.
• Se state cercando di scegliere un paio di font su Google Fonts, provate a utilizzare un servizio come fontpair per trovarne due che funzionino bene insieme.

I font che utilizzate nel design del vostro sito influenzeranno l’impressione che i visitatori avranno quando capiteranno sul vostro sito. Assicuratevi di aver considerato questo aspetto, e di aver scelto dei font che rafforzino il vostro marchio.

Lavorare con i Font Variabili

I font variabili sono un nuovo tipo di font che rendono più efficiente l’aggiunta di font al vostro sito.

Consentono di memorizzare più informazioni in un unico file di font, in modo che se vi servono variazioni (grassetto, corsivo, ecc.), non è necessario caricare più file, ma si può semplicemente caricare un file unico.

Per un font che contiene diversi font weight, stili e inclinazioni, questo potrebbe salvare molto spazio per i file e rendere il processo di accodamento del font o la sua aggiunta tramite @fontface molto più semplice.

I font variabili sono supportati nelle ultime versioni di Chrome, Edge, Firefox e Safari, ma non nei browser più vecchi; se li usate, avrete bisogno di un fallback. Oltretutto non ci sono ancora molti font variabili disponibili. Google Fonts non ne include, ma Google supporta le specifiche, quindi è probabile che verranno aggiunti con il tempo.

Gli sviluppatori di font stanno lavorando alla creazione di più font variabili e al miglioramento della loro affidabilità, quindi vale la pena monitorare i progressi in modo da poter utilizzare font variabili per ottimizzare i font una volta che diventaranno più stabili.

Riepilogo

Cambiare font sul vostro sito WordPress non è un compito semplice. Avete diverse possibilità fra cui scegliere:

1. Utilizzo di web font tramite un plugin.
2. Usare i web font inserendoli tramite codice nel vostro tema e accodandoli.
3. Ospitare i vostri font.

Dovreste poi concentrarvi su come ottimizzare i font per ottenere prestazioni migliori. Se seguite i suggerimenti di questa guida, dovreste essere in grado non solo di cambiare i font in WordPress, ma anche di controllarli meglio nel vostro tema.

Volete mettere in ordine la vostra pagina o il layout del blog per far sì che i vostri lettori si concentrino sul vostro contenuto? Allora date un’occhiata a questo: Come Rimuovere la Barra Laterale in WordPress (4 Metodi).