Come aggiungere caratteri personalizzati in WordPress

Vuoi aggiungere caratteri personalizzati in WordPress? I caratteri personalizzati possono aiutarti a rinfrescare il tuo tema e distinguerti. In questo articolo, ti mostreremo come aggiungere font personalizzati in WordPress usando Google Fonts, TypeKit e CSS3 @ Font-Face.

L'utilizzo di caratteri personalizzati nei temi di WordPress è diventato una tendenza comune. In effetti, ci sono alcuni temi che vengono completamente caricati con centinaia di caratteri personalizzati. Tuttavia il caricamento di troppi caratteri può rallentare il tuo sito web. Ecco perché ti mostreremo come caricare correttamente i caratteri personalizzati, in modo che non rallentino il tuo sito.

Ma prima di vedere come aggiungere font personalizzati in WordPress, diamo un'occhiata a trovare caratteri personalizzati.

Come trovare caratteri personalizzati da utilizzare in WordPress

I caratteri erano costosi, ma non più. Ci sono molti posti dove trovare fantastici web font gratuiti come Google Fonts, Typekit, FontSquirrel e fonts.com.

Se non sai come combinare i caratteri, prova la coppia di caratteri. Aiuta i designer a unire bellissimi caratteri Google.

Mentre stai selezionando i tuoi font, ricorda che l'utilizzo di troppi caratteri personalizzati rallenta il tuo sito web. Questo è il motivo per cui dovresti selezionare due tipi di carattere e usarli per tutta la progettazione. Ciò porterà anche coerenza al tuo design.

Video Tutorial

Se il video non ti piace o hai bisogno di ulteriori istruzioni, continua a leggere.

Aggiunta di caratteri personalizzati in WordPress da Google Fonts

Google Fonts è la libreria di font più grande, gratuita e più utilizzata tra gli sviluppatori di siti web. Esistono diversi modi per aggiungere e utilizzare Google Fonts in WordPress.

Metodo 1: aggiunta di caratteri personalizzati utilizzando Easy Google Fonts Plugin

Se si desidera aggiungere e utilizzare Google Fonts sul proprio sito Web, questo metodo è di gran lunga il più semplice e consigliato per i principianti.

La prima cosa che devi fare è installare e attivare il plugin Easy Google Fonts. Per ulteriori dettagli, consulta la nostra guida passo passo su come installare un plug-in di WordPress.

Dopo l'attivazione, puoi andare a Aspetto »Personalizzatore pagina. Si aprirà l'interfaccia di personalizzazione del tema live in cui vedrai la nuova sezione Typography.

Cliccando su Tipografia mostrerai diverse sezioni del tuo sito web dove puoi applicare Google Fonts. Fai clic su "Modifica carattere" sotto la sezione che desideri modificare.

Nella sezione della famiglia dei font puoi scegliere qualsiasi tipo di carattere Google che desideri utilizzare sul tuo sito web. Puoi anche scegliere lo stile del carattere, la dimensione del carattere, il riempimento, il margine e altro.

A seconda del tema, il numero di sezioni qui potrebbe essere limitato e potresti non essere in grado di cambiare direttamente la selezione dei font per molte aree del tuo sito web.

Per risolvere questo problema, il plugin ti consente anche di creare i tuoi controlli e usarli per cambiare i caratteri sul tuo sito web.

Per prima cosa, devi visitare Impostazioni »Google Fonts pagina e fornire un nome per il controllo dei caratteri. Usa qualcosa che ti aiuti a capire rapidamente dove userai questo controllo dei caratteri.

Fai clic sul pulsante "Crea controllo font" e poi ti verrà chiesto di inserire selettori CSS. È possibile aggiungere elementi HTML che si desidera targetizzare (ad esempio, h1, h2, p, blockquote) o utilizzare le classi CSS. È possibile utilizzare lo strumento Ispeziona per scoprire quali classi CSS sono utilizzate dall'area specifica che si desidera modificare.

Ora fai clic sul pulsante "Salva controllo font" per memorizzare le tue impostazioni. Puoi creare tanti controller di font di cui hai bisogno per diverse sezioni del tuo sito web.

Per utilizzare questi controller di font, è necessario andare a Aspetto »Personalizzatore e fare clic sulla scheda Tipografia.

Sotto Tipografia vedrai ora anche l'opzione 'Tipografia a tema'. Facendo clic su di esso verranno visualizzati i controlli personalizzati dei caratteri creati in precedenza. Ora puoi semplicemente fare clic sul pulsante di modifica per selezionare i caratteri e l'aspetto di questo controllo.

Non dimenticare di fare clic sul pulsante salva o pubblica per salvare le modifiche.

Metodo 2: Aggiungere manualmente i caratteri di Google in WordPress

Questo metodo richiede l'aggiunta di codice ai file del tema WordPress. Se non l'hai già fatto, consulta la nostra guida su come copiare e incollare il codice in WordPress.

Innanzitutto, visita la libreria di caratteri di Google e seleziona il carattere che desideri utilizzare. Quindi, fai clic sul pulsante di utilizzo rapido sotto il carattere.

Questo ti porterà in un'altra pagina dove ti verrà chiesto di scegliere gli stili che vuoi usare. Dovresti selezionare solo gli stili che pensi che effettivamente utilizzerai.

Dopo di che scorri un po 'verso il basso fino ad arrivare alla sezione del codice di incorporamento. Devi copiare il codice embed sotto la linguetta standard e incollarlo nel tuo tema header o file theme.php subito dopo il tag.

Questo è tutto ciò che hai aggiunto con successo un font Google personalizzato nel tuo sito WordPress.

Puoi usare questo tipo di carattere nel foglio di stile del tuo tema in questo modo:

 .h1 site-title font-family: 'Open Sans', Arial, sans-serif;  

Per istruzioni più dettagliate consulta la nostra guida su come aggiungere font Google nei temi WordPress.

Aggiunta di caratteri personalizzati in WordPress usando Typekit

Typekit è un'altra risorsa gratuita e premium per fantastici tipi di carattere che puoi usare nei tuoi progetti di design. Hanno un abbonamento a pagamento e un piano di abbonamento gratuito limitato che puoi utilizzare.

Basta registrarsi per un account Typekit e creare un nuovo kit.

Successivamente, è necessario selezionare un font dalla libreria Typekit e aggiungerlo al kit. Successivamente ottieni il codice di incorporazione per il tuo kit e vai all'area amministrativa del tuo sito WordPress.

Ora è necessario installare e attivare i font Typekit per il plugin WordPress. Dopo l'attivazione, visita semplicemente Impostazioni »Font Typekit e incollare il codice embed sulla pagina delle impostazioni del plugin.

Questo è tutto, ora puoi usare il font Typekit che hai selezionato nel foglio di stile del tema WordPress come questo:

 h1. site-title font-family: 'modesto-condensed', Arial, sans-serif;  

Per istruzioni più dettagliate consulta il nostro tutorial su come aggiungere impressionanti caratteri tipografici in WordPress usando Typekit.

Aggiunta di caratteri personalizzati in WordPress Utilizzando CSS3 @ font-face

Il modo più diretto per aggiungere font personalizzati in WordPress è aggiungendo i font usando CSS3 @ Font-face metodo. Questo metodo ti consente di utilizzare qualsiasi carattere che ti piace sul tuo sito web.

La prima cosa che devi fare è scaricare il font che ti piace in un formato web. Se non si dispone del formato Web per il font, è possibile convertirlo utilizzando il generatore Fontfirrel Webfont.

Una volta che hai i file webfont, dovresti caricarlo sul tuo server di hosting web.

Il posto migliore per caricare i font è all'interno di una nuova cartella "fonts" nella directory del tema o del tema figlio.

Puoi usare FTP o File Manager del tuo cPanel per caricare il font.

Una volta caricato il font, devi caricare il carattere nel foglio di stile del tema usando la regola CSS3 @ font-face come questa:

 @ font-face font-family: Arvo; src: url (http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf); font-weight: normal;  

Non dimenticare di sostituire la famiglia di caratteri e l'URL con il tuo.

Dopodiché puoi usare quel font ovunque nel foglio di stile del tema in questo modo:

 .h1 site-title font-family: "Arvo", Arial, sans-serif;  

Caricare i font direttamente usando CSS3 @ font-face non è sempre la soluzione migliore. Se si utilizza un font da Google Fonts o Typekit, è meglio servire il carattere direttamente dal proprio server per prestazioni ottimali.

Questo è tutto, speriamo che questo articolo ti abbia aiutato ad aggiungere font personalizzati in WordPress. Potresti anche voler controllare la nostra guida su come usare i font di icone in WordPress e come cambiare la dimensione del font in WordPress.

Se questo articolo ti è piaciuto, ti preghiamo di iscriverti al nostro canale YouTube per le esercitazioni video di WordPress. Puoi anche trovarci su Twitter e Facebook.