Luigi Sabbetti

Il mondo del web a 360 gradi

come usare typekit in un sito web

Come usare Typekit


di // Pubblicato il: 12 settembre 2018

Molto spesso ci siamo imbattuti nell’argomento font. Capita spesso, infatti, di avere la necessità di utilizzare un tipo di carattere all’interno del nostro sito che non sia già contenuto all’interno del pacchetto in dotazione con il nostro sistema operativo. In questo caso è possibile ricorrere a delle librerie esterne. Oggi vedremo assieme come usare typekit nel nostro sito.

In passato, abbiamo già visto come integrare un Google Fonts all’interno di un sito WordPress, oggi invece utilizzeremo la libreria di Adobe, Typekit. Sappi che il procedimento è similare, quindi se hai già dimestichezza con i Google font, non avrai molte difficoltà nell’utilizzo Typekit.

Indice

Cos’è Typekit

Prima di iniziare, mi sembra doveroso darti un’infarinatura generale su cos’è TypeKit e perché dovresti utilizzarlo. Typekit è un servizio fornito da Adobe che ti permette di stabilire una sottoscrizione al fine di utilizzare un font sul tuo PC, oppure inserirlo all’interno di un sito web.

Il servizio è sostanzialmente gratuito, in quanto puoi accedere anche con un piano di licenza individuale. Chiaramenti i prezzi possono variare in base all’utilizzo che intendi fare dei font messi a disposizione nella libreria.

Prima di utilizzare un font, comunque, è bene che tu legga le condizioni di utilizzo dello stesso.

Creazione di un ID Adobe

Ora dovresti avere le idee chiare riguardo l’importanza di Typekit. Passiamo alla fase operativa e vediamo come integrarlo nel nostro sito. Per prima cosa devi crearti un’utenza adobe.

Farlo è molto semplice, vai sul suto ufficiale di Adobe (https://www.adobe.com/it) e clicca sul tasto accedi posto in alto a destra. Segui i passaggi e conferma la tua mail.

In pochi e semplici passaggi avrai creato il tuo account adobe. Con questa utenza potrai creare i tuoi kit personalizzati e scegliere il font che più si addice al tuo sito web.

Typekit: la scelta del font

Munito del tuo account adobe, scegli il font che più ti aggrada attraverso il sito di Typekit. Seleziona il font cliccando sul tasto Add to Kit. Adesso dovrai specificare il dominio sul quale andrai ad inserire il tuo font. Esistono, chiaramente, diversi tipi di font: dai monotype a quelli caligrafici, passando per i serif ed i sans-serif. Adesso sta a te decidere.

Io ti consiglio di usare un font facilmente leggibile, se puoi evita di usare font con molte grazie sul web. La leggibilità è uno degli aspetti più importante per il tuo sito, soprattutto se punti sui contenuti.

Creazione del kit e pubblicazione

Nella casella domains, inserisci tuodominio.com e in name dai un nome al font che andrai ad utilizzare.

Adesso è importante che tu faccia click sul pulsante publish. Cosi facendo il tuo font sarà ora disponibile e pubblicato. Questo passaggio è davvero molto importante, in molti, infatti, dimenticato questo passaggio e vanno incontro all’errore typekit the domain isn’t in the list of published domains for kit. Non commettere questa leggerezza.

Inserire il font typekit nel sito web

Typekit, un pò come fa Google, ci permette di implementare il font in diversi modi: tramite un link href, tramite @import o tramite javascript. Vediamo assieme il primo metodo, il più semplice.

Copia il link href che trovi nella parte default. Incolla il codice nella parte head della tua pagina web.

<head>
  <link rel="stylesheet" href="https://use.typekit.net/mytypekit.css">
</head>

Ora il font è disponibile sulla tua pagina web e potrai usarlo in modo semplice tramite CSS. Ti basta settare il font family adeguato. Se, ad esempio, vuoi che tutti i paragrafi del tuo sito assumano il font typeKit non dovrai fare altro che inserire

p {
  font-family: 'nomefont', sans-serif;
}

ed il gioco è fatto.

Utilizzare typekit nelle mail

Mi dispiace deluderti, ma Typekit non può essere utilizzato all’interno di mail html. Se, dunque, stavi pensando di realizzare una newsletter con un font typekit, ti consiglio di virare verso un Google Font.

Purtroppo, sono gli stessi mod del forum ufficiale a confermarlo:
It is not possible to use Typekit fonts in an HTML email reliably, so we do not support it at this time.

Il problema è legato al fatto che Typekit utilizzare Javascript e @font-face per caricare correttamente il font. I client email non supportano Javascript e solo alcuni, invece, supportano @font-face.

Conclusioni

Abbiamo visto come utilizzare un font Typekit all’interno del nostro sito web. Il mio consiglio è comunque quello di non esagerare nel caricare font. Ricorda che i font aumentano il numero di chiamate ed appesantiscono il tuo sito. Usali sempre con moderazione.

Spero che con l’aiuto di questa guida sei riuscito a capire Typekit come funziona. Se hai dubbi o vuoi aggiungere altro sull’argomento, lascia pure un commento.

Ti è piaciuto questo articolo? Votalo!
[voti: 1 - Media voto: 5]

About Author

Mi chiamo Luigi Sabbetti e da circa dieci anni svolgo la professione di Web Designer. Profondamente amante della scrittura, mi piace condividere le mie conoscenze informatiche attraverso il mio sito web. Amo correre, guardare il mare e il buon cibo. Scopri di più nella mia