Ti sei mai chiesto come fanno i designer a utilizzare bellissimi font personalizzati sul loro sito web? Spesso aggiungono font personalizzati a WordPress utilizzando Typekit, un servizio Adobe che ti dà accesso a font di alta qualità. In questo articolo, ti mostreremo come aggiungere font Typekit in WordPress per migliorare la tua tipografia.

Perché usare i font Typekit?
Typekit è un popolare servizio di font basato su abbonamento che può farti risparmiare molti soldi. Invece di pagare per licenze di font individuali, che possono diventare piuttosto costose, puoi accedere alla loro intera libreria di centinaia di font gratuitamente o a una tariffa annuale fissa.
La libreria Typekit è una vasta collezione di oltre 1.000 font. Alcuni dei font più belli che puoi trovare sul web sono disponibili tramite Typekit, un servizio Adobe.
Il loro piano gratuito di base include l'accesso a oltre 230 font e puoi utilizzare 2 famiglie di font su un sito web gratuitamente. Altri piani partono da $49,99 a $99,99 all'anno.
Questi fantastici font Typekit possono essere facilmente aggiunti a qualsiasi sito web senza rallentare la velocità di caricamento delle pagine. I font vengono serviti dalla CDN di Adobe e si caricano a velocità molto più elevate rispetto all'hosting sul tuo sito.
Tutorial video Typekit per WordPress
Se non ti piace il video o hai bisogno di ulteriori istruzioni, puoi continuare a leggere qui sotto.
Perché usare font web personalizzati su WordPress?
La tipografia gioca un ruolo cruciale nel design del tuo sito.
La scelta dei font giusti comunicherà chiaramente la tua personalità e il tuo messaggio ai tuoi lettori. Indipendentemente dal tipo di immagine che vuoi proiettare - professionale, amichevole, casual, esperta - i font sul tuo sito web possono aiutarti a proiettare l'immagine giusta.
Utilizzando il giusto set di font, puoi lasciare un'impressione duratura. Invece di sembrare come ogni altro sito sul web, il tuo testo appare notevolmente diverso. Selezionare il font appropriato per il tuo sito WordPress può trasformare il tuo sito web da un design semplice a un'opera d'arte esteticamente gradevole e straordinaria.
I giusti font web personalizzati possono:
- aumentare i tassi di conversione
- abbassare il tasso di rimbalzo del tuo sito
- aumentare il tempo trascorso sul tuo sito web
- creare un'esperienza memorabile per gli utenti
Pronto per iniziare con i font Typekit? Ecco come usare Typekit per personalizzare il tuo design WordPress.
Come iniziare con Typekit
Per prima cosa dovrai creare un account Typekit. Per farlo, visita semplicemente Typekit.com per confrontare i piani disponibili.
Dovrai scegliere quale piano desideri sottoscrivere. Il piano gratuito ti limita a un sito web e include l'accesso a font limitati. Potresti voler iniziare con il piano gratuito per provarlo, e poi effettuare l'upgrade in seguito. L'upgrade ti offre una libreria più ampia di font e puoi usarli su più siti web.

Il passo successivo è la creazione di un kit. Il kit ti permette di mettere insieme una libreria specifica di font e impostazioni per il tuo sito web, in modo che Typekit carichi solo i file e il codice necessari. Per creare il tuo kit, aggiungi il nome del tuo sito e il nome del dominio, quindi fai clic su Continua.

Dopo aver finito di compilare le informazioni per il tuo kit, Typekit ti fornirà un po' di codice JavaScript da aggiungere al tuo sito. Puoi copiare e incollare questo codice in un editor di testo come Blocco note per salvarlo per ora. Lo aggiungeremo al tuo sito nel prossimo passaggio di questo tutorial.
Per ora, puoi iniziare a scegliere i tuoi font. Puoi sfogliare la libreria dei font e filtrare per opzioni come classificazione, peso, larghezza, altezza della x e altro ancora.

Quando vedi un font che ti piace, puoi fare clic su di esso per maggiori dettagli ed esempi. Se desideri aggiungerlo al tuo web kit, fai clic sul pulsante Uso web: Aggiungi al kit sul lato destro.

Questo aprirà un popup in cui dovrai aggiungere il font selezionato al kit appena creato.

Ora puoi fare clic sul pulsante Pubblica per salvare le modifiche al tuo kit.

Tutto qui! Il tuo kit di font è ora pronto per l'uso.
Aggiungere i tuoi font Typekit in WordPress
Il modo più semplice per aggiungere i tuoi nuovi font web personalizzati al tuo blog WordPress è utilizzare un plugin WordPress Typekit.
Ti consigliamo il plugin Typekit Fonts for WordPress. Dopo aver installato e attivato il plugin, puoi visitare Impostazioni » Typekit Fonts per configurarlo.

Per prima cosa dovrai incollare il codice JavaScript che hai salvato in precedenza nel campo del codice di incorporamento Typekit. Dopodiché, puoi aggiungere selettori CSS per specificare dove vuoi utilizzare il font sul tuo sito.
Nello screenshot sopra abbiamo aggiunto il font al selettore CSS h1.site-title.
Il tuo tema WordPress potrebbe utilizzare classi diverse per elementi diversi. Dovrai utilizzare lo strumento Ispeziona Elemento nel tuo browser web per scoprire queste classi CSS. Potresti anche voler consultare il nostro foglio di riferimento CSS generato da WordPress per principianti per aiutarti a iniziare.

Tutto qui! Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere fantastica tipografia in WordPress con Typekit. Potresti anche voler dare un'occhiata alla nostra guida su come aggiungere Google web fonts nei tuoi temi WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro Canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.


Forest Antemesaris
Questo elenco ha funzionato per me, quindi grazie! Ma il corsivo non è un vero corsivo, ma è obliquo. C'è un modo per rendere il corsivo un vero corsivo?
Supporto WPBeginner
Dipenderebbe dal font specifico, dovresti contattare il supporto di Typekit e dovrebbero essere in grado di assisterti.
Amministratore
Jes
Same request here. I have installed the Typekit plugin and gone through all the processes to add fonts to my site, but the fonts are not available in the inline text editor and drop-down menu list
George Galbraith
Divi non supporta un modo semplice per aggiungere font all'editor di testo inline o ai menu a discesa. Dovrai seguire il vecchio metodo e definire comunque la dimensione/peso/font del tuo testo per h1-h6/p nel campo css nel personalizzatore del tema.
Quindi usa i tag per applicare i font nell'editor inline. Spero che questo aiuti!
Michael
Thank you for this great tutorial (and the excellent value you provide in general)! It will save me from having to use a plugin
Mi chiedo come aggiungere il font all'editor inline e ai menu a discesa del mio tema (DIVI) usando Typekit e font personalizzati (non Google).
Hai qualche suggerimento?
Saluti!