Diverse opzioni sono state ritagliate di recente per aggiungere font personalizzati al tuo sito web utilizzando il selettore @ font-face. TypeKit è un nuovo entusiasmante giocatore in questo gioco perché si distingue in due aree chiave: facilità d'uso e ricchezza di caratteri disponibili. Questo tutorial ti guiderà attraverso diversi piccoli e semplicissimi passaggi per ottenere TypeKit attivo e funzionante sul tuo sito. Non troverai tecniche avanzate o script qui, quindi anche se sei un web designer principiante questo dovrebbe essere un gioco da ragazzi!
Primo: la cattiva notizia
Se visiti il sito di TypeKit, vedrai che ti verrà data la possibilità di registrarti per un invito. Questo non significa che ne avrai uno subito, quindi potresti dover aspettare un po 'prima di avere la possibilità di iscriverti. Fortunatamente, sono stato in grado di strappare un invito dal proprietario del sito di Design Shack, David Appleyard, in modo che potessi mostrarti in giro!
Iscrizione
Quando ti iscrivi, devi scegliere tra uno dei quattro piani. Mentre scuoti la testa per la delusione, lasciami spiegare perché non è solo un servizio gratuito. In poche parole, le font costano denaro. Ci sono alcune fonderie di font mega che creano e vendono font di qualità che non faranno scaricare gratuitamente. In passato, anche se tu, che sei un buon cittadino, paghi il prezzo intero per un font di qualità, non puoi ancora inserire quel font sul tuo sito a causa di problemi di licenza. In breve, l'incorporamento del carattere significava che gli utenti potevano rubarlo da soli. TypeKit gonne intorno a questo problema in virtù delle operazioni che ha stipulato con le principali fonderie per la licenza di font solo per uso web. Ciò significa che non sei bloccato con caratteri brutti, di bassa qualità gratuiti per il tuo sito, ma piuttosto una vasta selezione di tipi di carattere professionale di alto livello come quelli che vedresti nel mondo della stampa. Per farla breve, la qualità ha un prezzo. Ecco i piani tra cui scegliere:
Nota che per questo tutorial userò la demo gratuita, quindi vedremo una selezione ridotta di font e sarà limitata a due font personalizzati sul nostro sito. Con questo in mente diamo un'occhiata al nostro campo di prova!
Il sito di prova
Per questo tutorial ho creato un sito a pagina singola veloce e sporco con tonnellate di testo. Avrai bisogno di sapere che ho stilizzato l'intestazione principale usando il? H1? tag e il testo del paragrafo usando un semplice? p? etichetta. Per vedere il sito di prova dal vivo (e molto più grande), clicca qui o guarda l'immagine qui sotto.
Kit di installazione
Dopo aver scelto un piano, il prossimo passo è creare il primo kit e impostare un URL. Tieni presente che non è necessario inserire un indirizzo di pagina specifico, ma piuttosto l'url per il sito nel suo complesso. Ad esempio, puoi vedere che ho appena inserito l'URL principale di Design Shack.
Al momento della registrazione, dovresti anche ricevere uno script da incorporare nel tuo sito. Di seguito daremo un'occhiata a cosa fare con questo.
Codice di incorporamento
La chiave per fare in modo che TypeKit sovrascriva il tuo CSS è il seguente snippet di codice che ti danno da inserire nel tuo html:
È sufficiente posizionare questo codice nella sezione dell'intestazione della pagina HTML che si desidera modificare. Questa è tutta la codifica che devi fare! Basta una semplice copia e incolla e sei pronto per partire. Assicurati di pubblicare la pagina HTML aggiornata sul tuo sito prima di iniziare ad aggiungere font.
Aggiungere font
Che ci crediate o no, abbiamo quasi finito. Non resta che scegliere alcuni font e dirgli dove andare. Come ho detto prima, TypeKit ti offre una vasta selezione di font di alta qualità tra cui scegliere se selezioni uno dei piani a pagamento. Ricorda che il piano gratuito ha una selezione molto più limitata (sebbene non affatto scarsa). Per sostituire la nostra intestazione principale, selezioneremo un carattere angosciato e tagliente. Giù sul lato destro della lista dei caratteri vedrai una serie di tag. Clicca su "Afflitto"? tag per vedere solo i font in difficoltà.
Sentiti libero di navigare e scegliere quello che ti piace. Quando trovi quello che ti piace, fai clic su? Aggiungi? pulsante (ho scelto Bodedo). Dopo aver cliccato su? Aggiungi? pulsante, la finestra dell'editor del kit dovrebbe apparire.
L'editor del kit
Dopo aver aggiunto un font, dovresti visualizzare la seguente finestra:
Qui è dove applicherete il carattere che avete scelto al vostro sito. Nota nell'angolo in alto a sinistra dell'editor ti viene assegnato un selettore personalizzato da utilizzare nel tuo codice (nel nostro caso, .tk-bodedo). Puoi inserire il codice sul tuo sito e sostituire qualsiasi selettore che desideri con quello qui presente per sostituire il carattere. Tuttavia, ciò che faremo è invece indicare a TypeKit i tag esistenti che abbiamo utilizzato sul nostro sito. Come ho detto prima, la nostra intestazione principale è semplicemente un? H1? tag quindi tutto ciò che dobbiamo fare è digitare? h1? (senza virgolette) nel campo sotto? selettori? e premi aggiungi.
Ora premi il pulsante Pubblica. Questo è tutto! TypeKit farà il resto. Dopo un minuto o due, aggiorna la pagina e dovresti vedere il carattere visualizzato.
Regolazione del tuo CSS
Una delle grandi cose di TypeKit è che sostituisce solo il font. Tutte le impostazioni relative al carattere sono ancora controllabili nel tuo CSS. Controlla la mia pagina di test dopo aver aggiunto un carattere personalizzato alla copia del paragrafo.
Si noti che il nuovo font sembra davvero strano con le mie attuali impostazioni di altezza della linea. È troppo esteso e ora sta mangiando molto più spazio verticale. Per risolvere questo problema, sono andato nel mio file CSS e ho digitato l'altezza della riga della mia copia di paragrafo. Qualsiasi modifica apportata al mio CSS a parte il carattere stesso influirà sul nuovo carattere sul mio sito. Così puoi dare uno stile al contenuto del tuo cuore e il tuo carattere personalizzato rimarrà al suo posto! Ecco la mia altezza della linea regolata.
Il prodotto finito
Dai un'occhiata al sito finito qui per vedere TypeKit in azione. Nonostante il fatto che il sito sia stato probabilmente molto più attraente prima di iniziare, puoi facilmente vedere i vantaggi di TypeKit. Tieni presente che i font personalizzati che vedi non risiedono sul tuo computer eppure sono in anteprima e sono facilmente selezionabili.La parte migliore è che tutto ciò è stato fatto con una GUI user-friendly e un solo frammento di codice che non abbiamo dovuto scrivere! Tuttavia, non sono tutti elogi e complimenti per quanto riguarda TypeKit. Prima di concludere, discutiamo brevemente di ciò che ho trovato essere meno che perfetto.
La critica
Per prima cosa discutiamo di bug tecnici. Ho detto prima che quando si preme il? Pubblicare? pulsante devi aspettare un minuto prima che il sito si aggiorni. Quando sei abituato a vedere immediatamente le modifiche codificate aggiornate, questo può essere estremamente frustrante. La parte frustrante è l'incoerenza. A volte le modifiche diventano effettive quasi istantaneamente mentre altre ti lasciano premere il pulsante di aggiornamento per minuti in attesa di vedere il cambiamento avvenire. Ho anche riscontrato alcuni problemi con il sito stesso. La finestra dell'editor del kit si rifiuta di avviarmi per circa il 50% del tempo, invece ottengo una finestra vuota con un'animazione di caricamento senza fine. Chiudere la finestra e riaprire l'editor del kit risolve il problema, ma è ancora abbastanza fastidioso. Infine, la struttura dei costi non è facile da giustificare per ogni progettista. Certo, avere un testo selezionabile sul tuo sito è fantastico, ma per $ 250 all'anno probabilmente molte persone si limiterebbero ad inserire titoli fantasiosi come immagini.
Conclusione
Questo è tutto ciò che devi sapere per iniziare con TypeKit. Siamo andati oltre la registrazione e la scelta di un piano, la configurazione del primo kit, l'aggiunta di caratteri al sito, la pubblicazione delle modifiche e la regolazione del CSS dopo l'implementazione di caratteri personalizzati. Questo è un lungo articolo ma è solo perché ho diviso il processo in passi così piccoli e gestibili. In tutta la realtà puoi avere TypeKit attivo e funzionante sul tuo sito in pochi minuti. Registrati per il tuo invito e assicurati di dirci cosa ne pensi di TypeKit e di altre soluzioni personalizzate per i font che hai trovato. Sentiti libero di fare qualsiasi domanda usando i commenti qui sotto o tramite Twitter.