Come aggiungere caratteri WordPress personalizzati (e scegliere i caratteri che accoppiano)

Cerchi un modo per aggiungere i tuoi font WordPress personalizzati al tuo sito?

Il tuo tema WordPress probabilmente viene fornito con un proprio set di caratteri tra cui scegliere, ma le opzioni possono essere piuttosto limitate, quindi è del tutto comprensibile che tu voglia invece aggiungere i tuoi caratteri WordPress.

In questo post imparerai come caricare e utilizzare qualsiasi tipo di carattere in WordPress tramite alcuni metodi diversi.

Nel caso in cui non hai familiarità con l'idea di utilizzare i tuoi caratteri WordPress, inizieremo con un rapido manuale su dove trovare caratteri personalizzati e come abbinarli.

Quindi, ti mostreremo come aggiungere caratteri WordPress personalizzati da:

• Google Fonts
• Font Adobe (Typekit)
• Letteralmente altrove! (caricando un file di font e usando CSS3 @font-face)

Fare clic su questo collegamento per passare direttamente ai tutorial.

Dove trovare caratteri personalizzati per WordPress

Il posto più noto per trovare font WordPress personalizzati è sicuramente Google Fonts. Su Google Fonts troverai un repository di oltre 900 caratteri, tutti gratuiti e super facili da integrare nel tuo sito WordPress grazie al CDN di Google.

Dopo Google Fonts, un'altra opzione ben nota è Adobe Fonts ( precedentemente chiamato Typekit ). I font Adobe sono inclusi senza costi aggiuntivi come parte dell'abbonamento a Creative Cloud di Adobe, ma non sono disponibili per i non abbonati.

Infine, puoi trovare molti altri siti che aggregano caratteri gratuiti e premium. Due dei nostri preferiti sono:

• Font Squirrel: raccoglie font gratuiti al 100% per uso commerciale.
• Fonts.com – ha una vasta collezione di font premium.

Come abbinare i caratteri in modo che il tuo sito sia fantastico

In genere, non utilizzerai un singolo carattere sul tuo sito WordPress. Invece, la maggior parte dei siti utilizza coppie di caratteri per creare un design più interessante e aiutare a differenziare i contenuti.

Tuttavia, non vuoi semplicemente mettere insieme due caratteri casualmente: potrebbe non sembrare troppo caldo.

Invece, hai bisogno di due caratteri che funzionino insieme che, se non sei un designer , può essere difficile da capire.

Per aiutarti, ci sono un sacco di ottimi siti che ti suggeriranno coppie di caratteri. Ad esempio, se trovi un font che ami assolutamente , puoi utilizzare uno di questi siti per trovarne una coppia. Alcuni dei nostri preferiti sono:

• Font Pair
• Fontjoy
• Tipo.io

Sebbene non esista una regola che dica che puoi utilizzare solo due caratteri, dovresti stare attento a non usare troppi caratteri WordPress. Oltre al potenziale per creare un design caotico, l'utilizzo di troppi caratteri personalizzati può anche rallentare i tempi di caricamento del tuo sito.

Come aggiungere caratteri WordPress personalizzati: guide passo passo

Ora per la parte divertente: ecco come iniziare a utilizzare i tuoi font WordPress personalizzati.

Ci sono alcuni percorsi che puoi seguire qui a seconda di dove vuoi ottenere i tuoi caratteri.

Ecco i tre metodi che tratteremo. Ancora una volta, puoi fare clic su un collegamento per passare direttamente a un tutorial specifico:

1. Aggiungi Google Fonts in WordPress (plugin, manuale o metodi di hosting locale)
2. Aggiungi font Adobe (Typekit) in WordPress
3. Usa CSS3 @font-face per caricare e aggiungere qualsiasi carattere in WordPress

Come aggiungere i caratteri di Google a WordPress

Poiché Google Fonts è la fonte più popolare per i font personalizzati di WordPress, tratteremo tre diversi modi per aggiungere Google Fonts a WordPress:

1. Aggiungi Google Fonts dal CDN di Google con un plug-in
2. Aggiungi manualmente Google Fonts dal CDN di Google
3. Ospita Google Fonts localmente in WordPress con un plugin

Come aggiungere i caratteri di Google in WordPress usando un plugin

A causa della popolarità di Google Fonts, puoi trovare diversi plugin di qualità che rendono semplicissimo aggiungere Google Fonts a WordPress, con il nostro preferito è Easy Google Fonts perché è:

• Libero
• Leggero
• Facile da usare

Una volta installato e attivato il plug-in, vai su Aspetto → Personalizza nella dashboard di WordPress per avviare il personalizzatore di WordPress in tempo reale.

Quindi, fai clic sull'opzione Tipografia per scegliere le opzioni di Google Fonts:

Da lì, puoi utilizzare le opzioni per scegliere un carattere personalizzato per ogni elemento del tuo sito:

Ad esempio, ecco come appare cambiare il carattere del paragrafo:

Oltre a scegliere il carattere stesso, il plugin ti consente anche di personalizzare:

• Peso del carattere
• Decorazione del testo
• Colori

Se conosci un po' di CSS, puoi anche utilizzare la funzione Font Controls del plugin per raggruppare determinati elementi. Ad esempio, puoi combinare i selettori di intestazione per scegliere come target tutte le tue intestazioni contemporaneamente.

Per configurarlo, vai su Impostazioni → Google Fonts e crea un nuovo Controllo carattere per scegliere selettori CSS specifici:

Come aggiungere i caratteri di Google in WordPress senza un plug-in

Poiché Google ospita tutti i suoi caratteri sul proprio CDN, è anche abbastanza facile aggiungere manualmente i caratteri di Google a WordPress.

Fondamentalmente, invece di dover caricare i file dei caratteri sul tuo server, puoi semplicemente collegarti al CDN ospitato di Google e Google si occuperà di fornire i caratteri per te.

Ad alcune persone non piace farlo per motivi di prestazioni: nella prossima sezione condividerò un modo per ospitare localmente Google Fonts, se lo desideri .

Per iniziare, devi utilizzare il sito Web di Google Fonts per scegliere il carattere che desideri aggiungere.

Per questo esempio, supponiamo di voler utilizzare Roboto .

Vai alla pagina del carattere e fai clic su + Seleziona questo carattere :

Questo aggiungerà una finestra nell'angolo in basso a destra. Fare clic per espandere quella finestra.

Se vuoi scegliere pesi di carattere aggiuntivi ( ad es. per grassetto e corsivo ), puoi andare alla scheda Personalizza . Per un buon equilibrio tra usabilità e prestazioni, consigliamo di scegliere tre pesi dei caratteri al massimo assoluto:

• Regolare
• Corsivo
• Grassetto

Puoi anche usarne di meno se vuoi le migliori prestazioni .

Una volta effettuate le tue scelte, torna alla scheda Incorpora e copia il codice del carattere di incorporamento :

Successivamente, devi aggiungere questo codice alla sezione <head> del tuo tema WordPress. Puoi farlo:

• Modificando direttamente il file header.php del tuo tema figlio ( assicurati di utilizzare un tema figlio, altrimenti i tuoi caratteri personalizzati scompariranno quando aggiorni il tuo tema )
• Utilizzando un plugin gratuito come Inserisci intestazioni e piè di pagina

Dopo aver aggiunto il codice, puoi iniziare a utilizzare Google Fonts nel tuo CSS.

Se torni al sito Web di Google Fonts, Google ti dirà effettivamente le regole CSS che devi utilizzare:

Ad esempio, per fare in modo che i tuoi tag h2 utilizzino il tuo nuovo font Roboto, puoi andare su Aspetto → Personalizza → CSS aggiuntivo e aggiungere il seguente frammento:

h2 {

font-family: 'Roboto', sans-serif;

}

Come ospitare i caratteri di Google localmente in WordPress con un plugin

Ecco il metodo finale per Google Fonts!

Alcune persone preferiscono ospitare Google Fonts localmente, piuttosto che caricarli dal CDN di Google. Cioè, invece di caricarli da un link come "https://fonts.googleapis.com/css?family=Roboto:400,700", puoi ospitare i file sul tuo server.

Il modo più semplice per farlo è con un plugin gratuito chiamato CAOS per Webfonts.

Una volta installato e attivato il plug-in, puoi andare su Impostazioni → Ottimizza Webfonts per scegliere quali caratteri vuoi scaricare sul tuo server:

Una volta fatto ciò, puoi iniziare a utilizzare i caratteri nel tuo CSS ( proprio come se stessi seguendo il metodo precedente ).

Come aggiungere font Adobe (Typekit) in WordPress

Se desideri utilizzare Adobe Fonts in WordPress, puoi essenzialmente seguire gli stessi passaggi del metodo manuale di Google Fonts. Ricorda, il servizio Adobe Fonts è disponibile solo come parte dell'abbonamento a Creative Cloud .

Per iniziare, dovrai utilizzare il sito Web di Adobe Fonts per scegliere i tuoi caratteri e creare un progetto Web ( istruzioni dettagliate qui ).

Nella finestra Aggiungi caratteri al progetto Web , puoi scegliere quali caratteri includere:

Quindi, Adobe ti fornirà un codice di incorporamento, proprio come Google Fonts:

Prendi quel codice di incorporamento e aggiungilo al tuo sito utilizzando il file header.php del tuo tema figlio o un plug-in come Inserisci intestazioni e piè di pagina.

Una volta collegato al file CSS, puoi utilizzare il CSS fornito da Adobe per iniziare ad applicare il carattere ai selettori CSS del tuo sito:

Come usare @font-face in WordPress

Infine, l'ultimo metodo che ti mostreremo è come utilizzare @font-face in WordPress. La cosa bella di questo metodo è che funzionerà letteralmente con qualsiasi file di font da qualsiasi fonte .

Fondamentalmente, finché puoi scaricare il file del font e avere i diritti per usarlo, CSS3 @font-face lo farà.

Per iniziare, scarica il file del carattere dalla tua fonte preferita. Per questo esempio, utilizzeremo un font gratuito di Font Squirrel chiamato Alex Brush .

Se possibile, prova a scaricare il file nei formati .woff o .woff2 per la migliore compatibilità tra browser. Se ciò non è possibile, puoi scaricare il tuo font in un formato diverso e quindi utilizzare lo strumento gratuito FontSquirrel Webfont Generator per convertirlo in .woff :

Quindi, connettiti al server del tuo sito WordPress tramite FTP o cPanel File Manager. Poi…

• Crea una nuova cartella denominata fonts all'interno del tuo tema attivo o nella directory del tema figlio ( alcuni temi potrebbero già avere una cartella dei font . In tal caso, puoi saltare questo ).
• Carica il file del carattere nella cartella dei caratteri . Puoi caricare entrambi i formati .woff e .woff2

Dopo aver caricato i file, vai su Aspetto → Personalizza → CSS aggiuntivo nella dashboard di WordPress.

Per prima cosa, devi usare @font-face per aggiungere il tuo font...

Per farlo, inserisci il nome del tuo carattere come famiglia di caratteri e aggiungi l'URL diretto al file del carattere sul tuo server come URL . Ecco come appare per il nostro esempio AlexBrush:

@font-face {

famiglia di caratteri: AlexBrush;

src: url(http://easy-whale.w6.wpsandbox.pro/wp-content/themes/twentynineteen/fonts/alexbrush-regular-webfont.woff);

font-weight: normale;

}

Dopo averlo fatto, puoi usare i CSS per applicare la tua famiglia di caratteri ( con il nome che hai registrato con @font-face ). Ad esempio, ecco come appare l'utilizzo del carattere AlexBrush per le intestazioni <h2>:

E questo è tutto! Puoi usare questo metodo CSS3 @font-face per letteralmente qualsiasi file di font.

Considerazioni finali sui caratteri personalizzati di WordPress

Se il tuo tema WordPress non ha i caratteri che desideri utilizzare, niente panico! Hai molte opzioni per aggiungere i tuoi font WordPress personalizzati.

Il modo più semplice per iniziare è con i font gratuiti ospitati su Google Fonts o le opzioni premium ospitate su Adobe Fonts.

Tuttavia, non sei affatto limitato a questi servizi e, utilizzando CSS3 @font-face, puoi caricare letteralmente qualsiasi file di font su WordPress e iniziare a utilizzarlo nel tuo tema.

Ora esci e crea il tuo abbinamento di caratteri!