In questo articolo della guida di WordPress, ti guiderò passo dopo passo attraverso il processo di aggiunta di caratteri personalizzati ai tuoi temi a blocchi di WordPress. Ciò significa che puoi aggiungere QUALSIASI carattere a QUALSIASI tema, ad esempio aggiungendo Google Fonts al tema Twenty Twenty Three.

Puoi guardare il tutorial video qui sotto o saltarlo e leggere l'articolo (che è disponibile in più lingue utilizzando le funzionalità di traduzione in questa pagina). 

Ti mostro come eseguire questa operazione utilizzando il plug-in Create Block Theme sviluppato direttamente dal team di sviluppatori di WordPress. Ciò rende il plug-in ultra leggero, ad alte prestazioni e molto facile da usare con i temi a blocchi. Ti mostro anche come risolvere un problema di autorizzazioni comune che può verificarsi quando si lavora con questo plug-in.

Con questo metodo, puoi collegarti ai caratteri (ovvero collegarti a Google Fonts) o incorporare i caratteri localmente nel tuo sito (per migliori prestazioni del sito). Entriamo in esso!

Sommario

1. Installa il plug-in "Crea tema a blocchi".

Per cominciare, ti consigliamo di accedere alla tua area di amministrazione di WordPress, che ti porterà alla Dashboard. Da lì, vai su Plugin>Aggiungi nuovo dalla navigazione principale (freccia rossa nell'immagine sopra).

Cerca il plug-in "Crea tema a blocchi" utilizzando la barra di ricerca nell'angolo in alto a destra (delineato in verde nella foto sopra). Una volta visualizzato il plug-in Crea tema a blocchi, fai clic sul pulsante "Installa ora" per installarlo sul tuo sito (freccia rossa).

Successivamente, fai clic sul pulsante "Attiva" per attivare il plug-in.

Corso WordPress semplificato: come creare siti Web potenti di Davies Media Design

2. Disabilita il plug-in di sicurezza (temporaneamente)

Affinché il resto di questo processo funzioni senza problemi, dovrai disabilitare temporaneamente tutti i plug-in di sicurezza installati che impediscono agli utenti di modificare temi o plug-in.

Nel mio caso particolare sto usando il plug-in SG Security (fornito con tutti i siti Web WordPress ospitato tramite Siteground, un host che consiglio vivamente). So per certo che questo plug-in interferisce con il processo di aggiunta di caratteri personalizzati, quindi disabiliterò l'impostazione che si frappone.

In questo caso, passerò alla sezione "Sicurezza del sito" del plug-in SG Security utilizzando la navigazione principale (freccia rossa nell'immagine sopra).

Successivamente, scorrerò verso il basso fino all'opzione denominata "Disabilita editor di temi e plug-in" (evidenziata in verde nell'immagine sopra). Vedrai un interruttore a destra di questa opzione: fai clic sull'interruttore per disabilitare questa funzione (freccia rossa). Dovresti vedere un messaggio "Successo" pop-up nella freccia blu nell'angolo destro).

Con il nostro plug-in di sicurezza temporaneamente disabilitato, possiamo passare alla fase successiva di selezione e caricamento dei caratteri che vogliamo utilizzare sul nostro sito.

Esistono due opzioni per l'utilizzo di caratteri personalizzati in WordPress.

3. Seleziona Font personalizzati per WordPress (Font Google collegati)

La prima opzione è quella di collegarsi ai caratteri su un sito di terze parti, Google Fonts. Questa opzione è più semplice e richiede meno tempo per la configurazione, ma rallenta la velocità di caricamento della pagina del tuo sito web. Ti limita anche ai caratteri disponibili da Google Fonts (sebbene Google offra tantissimi fantastici caratteri gratuiti). Se sei meno esperto di tecnologia e non ti dispiace usare Google Fonts, ti consiglio questa opzione.

Per cominciare, vai su "Aspetto> Gestisci caratteri tema" dalla navigazione principale (freccia rossa nell'immagine sopra).

Nell'area di lavoro "Gestisci i caratteri del tema", vedrai tutti i caratteri predefiniti attualmente installati in WordPress (evidenziati in verde nell'immagine sopra). I tuoi caratteri sono anche elencati lungo il lato destro dell'area di lavoro, insieme alle diverse varianti di ogni carattere e dimensione del file per ogni variazione di carattere (delineate in blu).

Per aggiungere un nuovo carattere al tuo tema, fai clic sul pulsante "Aggiungi carattere Google" (freccia rossa).

Fai clic sul menu a discesa "Seleziona carattere" e cerca il carattere Google che desideri aggiungere al tuo sito (i caratteri sono in ordine alfabetico). Se non sei sicuro dell'aspetto di ciascun carattere, ti consiglio navigando nel sito web di Google Fonts per esplorare i caratteri e provarli. Una volta trovato il carattere che desideri utilizzare, selezionalo dal menu a discesa (freccia blu).

Ora vedrai un elenco di tutte le varianti disponibili che puoi installare sul tuo tema per quel font. Puoi selezionare la casella accanto alle singole varianti o fare clic sulla casella di controllo in alto (freccia rossa nell'immagine sopra) per selezionare tutte le varianti. Vedrai un elenco delle varianti selezionate, insieme alla dimensione del file, sul lato destro dello schermo. Quando sei pronto, fai clic su "Aggiungi caratteri Google al tuo tema" (freccia verde).

Ora dovresti vedere un messaggio nella parte superiore dell'area di lavoro che il carattere è stato installato sul tuo tema (in questo caso sul tema Twenty-Twenty Three). È quindi possibile fare clic sul collegamento "Gestisci caratteri" all'interno della finestra del messaggio di successo oppure fare clic sulla piccola freccia indietro (freccia rossa nell'immagine sopra) per tornare all'area di lavoro "Gestisci caratteri tema".

Ora vedrai la tua famiglia di caratteri appena installata elencata con il resto dei caratteri del tuo tema (freccia rossa nell'immagine sopra). Vedrai anche la tua famiglia di caratteri e tutte le varianti di carattere associate sul lato destro dell'area di lavoro (evidenziate in verde).

4. Incorpora caratteri personalizzati per WordPress (caratteri locali per una migliore SEO)

La seconda opzione per aggiungere caratteri al tuo sito Web WordPress è "incorporare" o "ospitare localmente" i tuoi caratteri. In altre parole, i tuoi file di font si troveranno all'interno dello stesso server web che ospita il tuo sito web.

Il vantaggio di questo metodo è che non richiede il recupero dei caratteri da un dominio di terze parti. Di conseguenza, i tuoi caratteri si caricano più velocemente e quindi la tua pagina web si carica più velocemente. Il caricamento più rapido delle pagine Web è migliore per l'esperienza dell'utente, il che significa che può aiutare il tuo sito a posizionarsi più in alto sui motori di ricerca e ottenere più traffico.

In altre parole, i caratteri incorporati sono migliori per la SEO (ottimizzazione per i motori di ricerca).

Sebbene questo metodo richieda un paio di passaggi in più, è comunque abbastanza semplice e utilizza lo stesso plug-in che abbiamo installato in precedenza (plug-in Crea temi di blocco).

Per installare i tuoi caratteri localmente, inizia andando su Aspetto>Gestisci caratteri tema dalla navigazione principale (se non ci sei già dall'ultimo passaggio - freccia blu nell'immagine sopra). Successivamente, fai clic sul pulsante "Aggiungi carattere locale" nell'angolo in alto a destra dell'area di lavoro (freccia rossa).

Verrai indirizzato all'area "Caratteri locali" dove potrai selezionare un file dal tuo computer da caricare nel tuo tema. Sotto il pulsante "Scegli file" vedrai un elenco dei formati di file di caratteri supportati. Puoi ottenere questi formati da qualsiasi sito Web di font affidabile, incluso Google Fonts.

Trova e scarica il tuo font preferito da Google Fonts

Salterò su Google Fonts e utilizzerò la barra di ricerca (freccia rossa) per cercare il carattere che desidero, in questo caso il carattere "Catamarano". Una volta che il carattere è elencato nei risultati, farò clic su di esso per visualizzare la pagina del carattere (freccia verde).

Successivamente, farò clic sul pulsante "Scarica famiglia" per scaricare questo font e tutte le sue varianti sul mio computer. Puoi scorrere verso il basso nella pagina del carattere se vuoi vedere tutte le varianti disponibili per questo carattere.

Fai clic su "Salva" per salvare il file zip del carattere sul tuo computer.

Decomprimere la cartella dei caratteri per accedere ai file dei caratteri

Al termine del download, fai clic sulla freccia accanto al download completato (freccia rossa) e fai clic su "Mostra nella cartella" (freccia verde).

Fai clic con il pulsante destro del mouse sul file zip in Esplora file e fai clic su "Estrai tutto".

Verrà visualizzata una finestra pop-up che mostra dove vengono estratti i caratteri (freccia rossa). Puoi modificare questa posizione se lo desideri, altrimenti fai clic sul pulsante "Estrai" (freccia verde). Questo decomprimerà la cartella e creerà un nuovo file sul tuo computer con tutti i file dei font decompressi. Questa cartella dovrebbe aprirsi automaticamente.

Se hai scaricato file di font utilizzando Google Fonts, accedi alla cartella denominata "static" per visualizzare tutti i tuoi file di font. Altrimenti, cerca semplicemente qualsiasi file che sia file OTF, TTF, WOFF o WOFF2.

All'interno di questa cartella "statica" vedrai un elenco di tutte le varianti di font che abbiamo scaricato per il font Catamaran da Google Fonts. Ci sono 9 varianti in totale e possiamo caricarle tutte sul nostro sito web o solo le varianti che vogliamo/di cui abbiamo bisogno. Fare clic sulla posizione della cartella in Esplora file (freccia verde), quindi fare clic con il pulsante destro del mouse e selezionare "Copia".

Carica i tuoi caratteri personalizzati su WordPress

Torna a WordPress dove hai aperto l'area di lavoro "Caratteri locali". Fare clic sul pulsante "Scegli file" (freccia rossa nell'immagine sopra) per selezionare i caratteri. Puoi navigare manualmente fino alla posizione sul tuo computer in cui sono memorizzati i tuoi font. Oppure, fai semplicemente clic sulla barra degli indirizzi di Esplora file (freccia blu), elimina l'indirizzo attualmente presente, quindi fai clic con il pulsante destro del mouse e seleziona "Incolla" (freccia verde). Questo incollerà l'indirizzo che hai copiato nel passaggio precedente. Premi il tasto Invio e verrai indirizzato alla cartella con i tuoi caratteri.

Devi caricare le varianti del carattere una alla volta. Per questo esempio, caricherò semplicemente la variante di carattere "Catamaran-Regular" facendo clic su di essa (freccia verde), quindi facendo clic sul pulsante "Apri" (freccia rossa).

Ora dovresti vedere le informazioni per "FONT NAME", "FONT STYLE" e "FONT WEIGHT", oltre a un'anteprima del font sul lato destro. Fai clic su "Carica carattere nel tuo tema" (freccia rossa) per caricare la variazione del carattere.

Visualizza i caratteri del tuo tema personalizzato

Ora dovresti vedere un messaggio di successo nella parte superiore dell'area di lavoro (delineato in verde nell'immagine sopra). Congratulazioni: il tuo carattere personalizzato è ora caricato nel tuo tema come carattere locale! Puoi continuare a fare clic su "Scegli file" e caricare tutte le varianti di carattere che desideri.

Al termine, fare clic sul collegamento "Gestisci caratteri" all'interno della finestra del messaggio di successo o sulla freccia indietro (indicata dalla freccia rossa) per tornare all'area di lavoro Gestisci caratteri tema.

Ora vedrai la nuova famiglia di font "Catamaran" elencata con il resto delle famiglie di font del tuo tema (freccia rossa). Inoltre, vedrai la famiglia di caratteri e le eventuali varianti installate sul lato destro della finestra Gestisci caratteri tema (evidenziata in verde).

5. Cambia i caratteri del tuo tema con i tuoi caratteri personalizzati

Ora che hai installato i tuoi nuovi font, è il momento della parte divertente!

Per cambiare i caratteri del tuo tema con i tuoi caratteri personalizzati, vai all'editor del sito andando su Aspetto> Editor (freccia rossa nell'immagine sopra).

Fai clic in un punto qualsiasi all'interno dell'area del contenuto principale (freccia rossa) dell'editor del sito per visualizzare i controlli.

Nel menu principale, fai clic sull'icona "Stili" (freccia blu). Quindi, fai clic su "Tipografia" (freccia rossa).

Sotto "Elementi" puoi cambiare il carattere per il testo, i collegamenti, le intestazioni o i pulsanti. Selezionerò l'opzione "Intestazioni" per questo esempio.

Ora vedrai un menu a discesa sotto "Tipografia" in cui puoi selezionare uno qualsiasi dei caratteri del tuo tema (freccia rossa). Puoi vedere i caratteri "Neuton" e "Catamaran" che ho aggiunto per questo tutorial sono elencati qui. Selezionerò "Neuton" per il mio carattere di intestazione.

Fare clic sul pulsante "Salva" nell'angolo in alto a destra per salvare le modifiche.

Fai clic su "Salva" ancora una volta (freccia rossa) e il tuo carattere personalizzato verrà ora salvato per tutte le intestazioni del tuo sito!

Successivamente, puoi fare clic sul link Visualizza>Visualizza sito nell'angolo in alto a destra dell'editor del sito (frecce rosse nella foto sopra) per vedere come appare il tuo sito web con il tuo nuovo carattere. Torna all'editor del sito e ripeti questo processo per tutti gli altri elementi di cui desideri personalizzare il carattere.

Per tornare all'area di amministrazione di WordPress, fai clic sul logo nell'angolo in alto a sinistra dell'editor del sito (freccia verde), quindi fai nuovamente clic sul logo.

6. Come eliminare i caratteri personalizzati da WordPress

Per eliminare uno qualsiasi dei tuoi caratteri personalizzati, inizia tornando a Aspetto> Gestisci caratteri tema.

Puoi eliminare l'intera famiglia di caratteri passando il mouse sul lato destro del nome della famiglia di caratteri e facendo clic sull'icona del cestino che appare (freccia blu). Oppure, passa il mouse sopra le singole varianti di carattere e fai clic sull'icona del cestino (le variazioni di carattere si trovano all'interno dell'area evidenziata in verde). Puoi anche fare clic sul link "Rimuovi famiglia di caratteri" per eliminare qualsiasi famiglia di caratteri (freccia viola).

Questo è tutto per questo tutorial! Se ti è piaciuto, puoi dare un'occhiata al mio altro Articoli della guida di WordPress oppure iscriviti al mio Masterclass di WordPress su Udemy.

Newsletter via email per app creative gratuite di Davies Media Design

Iscriviti alla Newsletter DMD

Iscriviti per ricevere nuovi tutorial, aggiornamenti sui corsi e le ultime notizie sulle tue app creative gratuite preferite!

È stato sottoscritto con successo!

Pin It on Pinterest