Typekit è un servizio web a pagamento* grazie al quale sarà possibile utilizzare dei font di altissima qualità nelle pagine dei nostri siti WordPress.
Sebbene l’attivazione e la configurazione di questo prodotto non ci esporrà certamente a delle grandi difficoltà, questa piccola guida HowTo potrà rivelarsi utile per fare conoscere Typekit ai nuovi utenti WordPress nonchè essere gradita a quei webmaster meno esperti e comunque esigenti.

Offerta commerciale

Typekit si propone ai propri potenziali clienti con quattro *piani commerciali ed uno gratuito:

1. Trial (gratuito) – 25.000 Pagine/mese | accesso Trial Library | 1 sito web | 2 font per sito | servizio SSL | badge Typekit obbligatorio
2. Personal ($24.99/anno) – 50.000 Pagine/mese | accesso Personal Library | 2 sito web | 5 font per sito | servizio SSL | badge Typekit facoltativo
3. Portfolio ($49.99/anno) – 500.000 Pagine/mese | accesso Full Library | siti web illimitati | font per sito illimitati | servizio SSL | badge Typekit facoltativo
4. Performance ($99.99/anno) – 1 M Pagine/mese | accesso Full Library | siti web illimitati | font per sito illimitati | servizio SSL | badge Typekit facoltativo
5. Business (da $40.00/mese) – Milioni Pagine/mese | accesso Full Library | siti web illimitati | font per sito illimitati | servizio SSL | supporto VIP

Una volta scelto il piano commerciale adeguato alle proprie necessità (io faccio uso del “Portfolio” con questi font), premere sul pulsante “Sign up” relativo al piano per iniziare la procedura di registrazione.

Creazione account

Per potere avviare la procedura di acquisto del proprio piano commerciale (Trial Plan compreso) sarà necessario registrarsi a Typekit attraverso la propria ID Adobe* (se disponibile) oppure creando un nuovo account compilando il modulo di registrazione con i dati richiesti.
*Adobe ha acquisito Typekit lo scorso 3 Ottobre 2011

Acquisto piano commerciale

Giunti a questo punto, Typekit vi domanderà di inserire i dati della vostra carta di credito (la Postepay – Visa prepagata va benissimo).
Ricordo che una volta acquistato un piano annuale, per 30 giorni il servizio sarà completamente gratuito e non verrà prelevata alcuna somma di denaro dalla vostra carta.
Durante il periodo di prova, sarà possibile quindi decidere se acquistare oppure no il piano avendo di fatto la possibilità in ogni momento di cancellare il proprio account nonchè di effettuare degli upgrade o downgrade relativi al piano in uso.
NOTA: l’acquisto non potrà essere effettuato via PayPal.

JavaScript code

Una volta indicato il sito per il quale si desidera utilizzare Typekit, ci verrà fornito un codice JavaScript personale che dovrà essere inserito nel tag head del nostro tema WordPress (laddove di solito si usa aggiungere il codice di Google Analytics per intenderci).
Per gli utenti di Genesis, inserire il codice sotto Bacheca/Genesis/Theme Settings/widget “Header & Footer Scripts” e salvare.

Browse Fonts

Ora che abbiamo inserito il codice JavaScript personale, premiamo sul pulsante “Browse Fonts” presente nel menu di navigazione in modo tale da poterci tranquillamente dedicare alla scelta di quale font utilizzare per il nostro sito.

Poniamo come esempio di volere scegliere un carattere e che la nostra preferenza ricada sul font Proxima Nova. Facciamo scorrere il puntatore del mouse sulla finestrella del font e premiamo sul link + Add to Kit. Giunti a questo punto, Typekit aprirà in automatico nel browser una nuova finestra aggiungendo il nostro font al Kit Editor.

Kit Editor

Questa sezione è facilmente definibile come il cuore del proprio account Typekit, ossia quell’area di configurazione preposta a raccogliere tutti i font che saranno utilizzati nelle pagine dei nostri siti.
Nel particolare, è qui dove potremo trovare e modificare all’occorrenza le voci in merito ai selettori, al supporto lingua, al peso e stile ed al CSS Stack:

• Selectors: in aggiunta all’utilizzo delle impostazioni Selectors per comunicare a Typekit dove posizionare i font, sarà possibile fare uso del font direttamente nelle regole CSS ad esempio con il seguente valore per font-family: “proxima-nova”.
  
  Ecco un esempio:
  [css]h1 {
  font-family: "proxima-nova";
  }[/css]
  Si può anche includere un fallback font (per i browser meno recenti) aggiungendolo di seguito al valore font-family di Typekit.
  Ecco un esempio su come fare:
  [css]h1 {
  font-family: "proxima-nova",sans-serif;
  }[/css]
• Language Support: un sito in lingua italiana può utilizzare tranquillamente il set di caratteri predefiniti (Default character set) il quale include la codifica caratteri Latin-1 nonchè alcuni altri caratteri quali le virgolette inglesi ed i bullets.
  Qualora si desiderasse invece una lingua che non sia l’inglese, lo spagnolo, il portoghese, etc. sarà necessario fare uso de All Characters set.
  L’attivazione del set All Characters aumenterà sensibilmente la dimensione del file dei tuoi font! Usa quindi con saggezza…
• Weights & Styles: letteralmente, il peso e lo stile specifici da attribuire al font.
  Nella sostanza, volessimo accedere a degli specifici weights & styles o variazioni del font da utilizzare nel nostro CSS, potremo farlo grazie a questi valori relativi appunto a font-family, font-weight e font-style.
  Attenzione : nel caso in cui desiderassimo aggiungere ad esempio la variazione semibold, sarà necessario aggiornare il nostro CSS modificando a
  [css]font-family: "proxima-nova",sans-serif;
  font-style: normal;
  font-weight: 600;[/css]

  poichè qualora non attribuissimo alle proprietà font un valore al peso ed allo stile del carattere, non otterremo nessun risultato visibile ed avremo aumentato inutilmente il peso del nostro file di 25k.

• CSS Stack: area di riferimento rivolta per quegli utenti che fanno uso di un browser che non supporta la regola @font-face. In altri termini, la proprietà font-family dovrebbe contenere alcuni nomi di font (Web Safe Font) utilizzabili dal browser come alternativa in modo tale da potere assicurare la massima compatibilità tra gli stessi browser ed i sistemi operativi (“fallback” system). Nella sostanza, qualora il browser non supportasse il primo font proverebbe il successivo, etc.

Conclusioni

Typekit offre una configurazione predefinita per ogni font caricato nel Kit Editor quindi, nel caso in cui fossimo afflitti da un improvviso stato confusionale, potremo anche fare a meno di apportare delle modifiche al setting lasciandolo di fatto così com’è.
Ogni font caricato nel Kit Editor potrà essere rimosso in un qualsiasi momento.
Utilizzare al massimo due o tre tipi di font per sito facendo molta attenzione al peso complessivo del file (pena eccessivo rallentamento durante il caricamento della pagina web). In ogni caso, al superamento dei 400k di peso, Typekit avrà l’accortezza di avvertirci.

Note a margine

Tempo fa ho pubblicato anche un articolo sul come installare i Google web fonts nei temi per WordPress (Just in Case).