Share
Negli ultimi cinque anni, la tipografia sul web ha assunto un aspetto piuttosto chiaro (scusate, gioco di parole). Un tempo i progettisti web erano costretti a utilizzare solo caratteri sicuri per il web; font di sistema disponibili su tutti i computer degli utenti. Come potete immaginare (o sperimentato di prima mano), questo è stato frustrante per noi maniaci del genere, ma ci siamo occupati di esso. Tuttavia, in un modo strano è stato bello perché hai avuto un set limitato di font tra cui scegliere, quindi il tempo trascorso a scegliere il font perfetto era minimo (non mi lamento). Ora, però, è possibile un font specifico per il look and feel che si desidera ottenere, e le aziende possono ora proiettare il loro linguaggio del marchio visivo attraverso la tipografia.
Quindi sono venuti alcuni metodi di tipo di servizio per i nostri siti Web, il più utilizzato è @ font-face. Questa regola CSS ci dà la possibilità di scaricare font da un server e usarli sulle nostre stupende pagine web. Inizialmente, il supporto del browser era minimo, ma ora è ampiamente supportato. L'unica eccezione degna di nota è l'Opera Mini (ciao ragazzi).
@ font-face è una regola CSS che specifica il nome del font, la sua posizione e il font-weight. Nell'esempio semplificato di seguito, il carattere viene memorizzato su font-face.com e viene definito il percorso specifico. Potrebbe sembrare qualcosa del genere:
Accentsconagua
@ font-face font-family: 'DeliciousRoman'; src: url ('http://www.font-face.com/fonts/delicious/Delicious-Roman.otf'); font-weight: 400; Puoi vedere che il nome del carattere è impostato su "DeliciousRoman". Questo è il nome del font che verrà quindi referenziato nel nostro stack di font CSS, insieme ai font di fallback se il font non viene caricato:
.esempio font-family: 'DeliciousRoman', Arial, sans-serif;
Tuttavia, le cose non sono così semplici. Poiché i diversi browser richiedono formati di font diversi, dobbiamo essere sicuri che stiamo fornendo tutte le opzioni necessarie.
Ecco un elenco di browser insieme ai tipi di file supportati:
Ci sono state diverse convenzioni all'interno di @ font-face per risolvere il problema della compatibilità del browser. È bello sapere come si è evoluto @ font-face e la seguente breve cronologia fornisce collegamenti a una buona quantità di letture sull'argomento.
Paul Irish ha originariamente ideato la sintassi Bulletproof @ font-face nel 2009. Nel corso degli anni sono comparsi alcuni hack per affrontare il problema della compatibilità dei browser, il più controverso è il trucco.
Ne è uscita un'altra versione chiamata Mo 'Bulletproofer Syntax di Richard Fink, che trattava problemi di carattere che si verificavano in Android.
Infine, siamo arrivati alla sintassi FontSpring @ font-face. Questo approccio semplifica gran parte del linguaggio e assomiglia a:
@ font-face font-family: 'DeliciousRoman'; src: url ('fonts / DeliciousRoman-webfont.eot? #iefix') formato ('embedded-opentype'), url ('fonts / DeliciousRoman-webfont.woff') formato ('woff'), url ('caratteri / DeliciousRoman-webfont.ttf ') format (' truetype '), url (' fonts / DeliciousRoman-webfont.svg # svgDeliciousRoman ') format (' svg '); Nell'esempio sopra, puoi vedere che i font sono auto-ospitati e sono memorizzati sul server in una cartella chiamata "font".
Font Squirrel (e alcuni altri) forniscono un pratico generatore di webfont che convertirà qualsiasi font in un kit di file web per l'incorporamento. Nel kit sono inclusi tutti i file di caratteri necessari, la specifica sintassi CSS @ font-face e una demo HTML. È quindi possibile posizionare i file dei font direttamente sul server e modificare il percorso nel CSS @ font-face.
Nota: Tuttavia, assicurati di disporre dei diritti sufficienti per utilizzare i caratteri che usi nel generatore e utilizzali sul tuo sito.
A seconda che tu stia auto-ospitando o usi un servizio di font come Typekit (ne parlerò più avanti), il tuo CSS sembrerebbe un po 'diverso. Ad esempio, con un servizio come Typekit, crei, beh, "kit" di caratteri che contengono tutti i font che userai per ogni sito web specifico. Per ogni kit che crei ti viene assegnato uno snippet di codice JavaScript da inserire nel file del tuo documento HTML. Questo snippet carica le corrette regole @ font-face per quel browser specifico.
Per ulteriori informazioni sul motivo per cui TypeKit utilizza JavaScript, leggi Caricamento di font Web migliore con JavaScript.
Nelle impostazioni del kit offerte di fonts.com troverai tre diverse opzioni di pubblicazione con le iscrizioni ai piani premium. Oltre a un'opzione javascript simile a Typekit, offrono anche un'opzione non JavaScript che collega a un foglio di stile servito ea un'opzione self-hosted. A seconda di cosa scegli, ovviamente il tuo CSS apparirà un po 'diverso.
Come puoi immaginare, il licensing dei font diventa un grosso problema quando si usano i font sul web. L'uso diffuso di @ font-face ha provocato un'esplosione di font gratuiti, alcuni dei quali sono veramente buoni, alcuni dei quali no. Font Squirrel, Fontex e DaFont sono un paio delle opzioni più conosciute per i font gratuiti. Lost Type Coop è un altro ottimo posto per raccogliere font, donazioni accettate. Google Fonts offre anche una vasta selezione di font gratuiti, anche se secondo me alcuni sono di scarsa qualità.
L'industria di hosting dei font è cresciuta di molto negli ultimi due anni. L'hosting dei caratteri ti consente di concedere in licenza alcuni dei tuoi font preferiti, e in molti casi di qualità migliore rispetto ai font gratuiti, per l'utilizzo sul web. Typekit è stato uno dei primi grandi attori in questo mercato e ha una selezione davvero bella di caratteri. Nel corso del tempo hanno aggiunto alcuni tipi di carattere più noti come Futura e Meta e hanno reso diversi caratteri ben noti nel mondo del web.
Fonts.com offre licenze per la sua libreria di oltre 150.000 caratteri che contiene alcuni dei font più popolari al mondo come Avenir, Frutiger, Univers e Din per nominarne alcuni. Questo servizio ha un paio di caratteristiche uniche che mi piacciono molto: a seconda del livello di appartenenza che hai, integra SkyFonts che fondamentalmente ti permette di "noleggiare" i font per un periodo di tempo, più comunemente con incrementi di uno o trenta giorni. Ciò consente di utilizzare il carattere nelle applicazioni desktop per scopi di simulazione. Inoltre, con un abbonamento premium, è possibile scaricare il kit di font e ospitare autonomamente i propri font, aumentando i tempi di caricamento.
Uno dei servizi nuovi di zecca recentemente ha suscitato scalpore nel lancio della tipografia cloud da parte di HF & J. HF & J è ampiamente considerato l'autorità sulla tipografia e i loro font sono all'altezza di tale reputazione. Un'offerta web di questi tipi è stata a lungo attesa mentre ridisegnavano ciascuno dei loro font per lo schermo. Hanno praticamente alzato il tiro, facendo 9pt. Gotham leggibile sullo schermo. È davvero incredibile.
Hanno un'interfaccia elegante e piena di funzionalità killer, come selezionare solo i caratteri di un font di cui hai bisogno, che a sua volta conserva spazio e aumenta il tempo di caricamento. Sicuramente vale la pena dare un'occhiata.
La struttura dei prezzi per i servizi di hosting dei caratteri varia, ma la maggior parte di essi si basa sulle visualizzazioni di pagina per ciascun sito su cui stai utilizzando i loro font. Oltre a questo, molti servizi come fonts.com hanno diversi livelli di prezzo che offrono diversi add-on come font desktop, font di simulazione e opzioni di self hosting. È meglio vedere ciò che è disponibile e scegliere il servizio e pianificare quello che si adatta alle tue esigenze.
Quindi è meglio usare un servizio di hosting dei font o un self-host? Beh, dipende. Ecco alcuni vantaggi di ciascuno:
Servizio di hosting (come TypeKit, Fonts.com, HF e J)
Self Hosting
Va notato che è necessario essere consapevoli del numero di caratteri che si sta utilizzando. Quando si tratta di prestazioni, più pesi con lo stesso tipo di carattere significano che stai caricando un altro font intero, quindi fai attenzione poiché più font utilizzi, maggiore è il tempo di caricamento. Imposterai gli allarmi su TypeKit una volta che il tuo kit avrà superato i 500k, ma in questo caso meno è meglio.
Ben fatto, ora sei istruito sulle basi di @ font-face e sui molti modi in cui può essere utilizzato! Assicurati di tenere il passo con i nuovi strumenti e metodi di integrazione dei caratteri sul Web, come con qualsiasi cosa sul web, cambia rapidamente!
