Tutorial WordPress affidabili, quando ne hai più bisogno.
Guida per principianti a WordPress
WPB Cup
25 Milioni+
Siti web che utilizzano i nostri plugin
16+
Anni di esperienza con WordPress
3000+
Tutorial WordPress di esperti

Come aggiungere una tipografia eccezionale in WordPress con Typekit

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.

Font Typekit in WordPress

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

Iscriviti a WPBeginner

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.

Piani di abbonamento Typekit

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.

Creazione di un kit per il tuo sito

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.

Scelta di un font dalla libreria Typekit

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.

aggiungere un font typekit al tuo web kit

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

aggiungendo il tuo font web personalizzato a un kit

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

pubblica il tuo kit per salvare le modifiche

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.

utilizzo di un plugin Typekit per WordPress per personalizzare i font

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.

Utilizzo dello strumento Ispeziona elemento in Google Chrome per trovare le classi CSS

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.

Dichiarazione: Il nostro contenuto è supportato dai lettori. Ciò significa che se fai clic su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come è finanziato WPBeginner, perché è importante e come puoi supportarci. Ecco il nostro processo editoriale.

Il Toolkit WordPress Definitivo

Ottieni l'accesso GRATUITO al nostro toolkit - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Interazioni del lettore

5 CommentsLeave a Reply

  1. 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?

    • Dipenderebbe dal font specifico, dovresti contattare il supporto di Typekit e dovrebbero essere in grado di assisterti.

      Amministratore

  2. 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 :-(

    • 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!

  3. 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!

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tieni presente che tutti i commenti sono moderati secondo la nostra politica sui commenti, e il tuo indirizzo email NON verrà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avviamo una conversazione personale e significativa.