Quando Google Web Fonts è stato rilasciato per la prima volta, abbiamo scritto una rapida panoramica. Da allora, il servizio è stato completamente revisionato ed è giunto il momento per una dettagliata guida da zero.
Unisciti a noi all'inizio del nostro lavoro e discuti di cosa sia il servizio Google Web Fonts e come installarlo e farlo funzionare oggi sul tuo sito. Dacci qualche minuto del tuo tempo e ti apriremo al fantastico mondo di fantastici web gratuiti.
Perché Google Web Fonts?
Uno alla volta, il web era pieno di caratteri standard noiosi. Al fine di garantire la compatibilità tra il maggior numero di utenti, i web designer sono stati costretti a limitare le loro scelte di carattere di testo dal vivo a quei caratteri tipografici che si trovano comunemente sulla maggior parte delle macchine.
"Le licenze dei font possono essere davvero un disastro, quindi non è sempre una buona idea incorporare direttamente i caratteri casuali in una pagina web."Questa non era la cosa peggiore al mondo per coerenza e leggibilità, ma limitava davvero la creatività tipografica del web nel suo complesso. Con CSS3, la maggior parte dei browser ha iniziato a supportare @ font-face, un modo per offrire font personalizzati a una pagina web. Sfortunatamente, le licenze dei font possono essere davvero un disastro, quindi non è sempre una buona idea incorporare direttamente i font casuali in una pagina web.
Servizi di font Web
Come soluzione, sono cresciuti numerosi servizi di font per font @ face-face, il migliore e il più famoso dei quali è probabilmente Typekit. Typekit aveva una bellissima soluzione: sfoglia la sua vasta libreria di caratteri, quindi copia e incolla del codice per implementarli sul tuo sito.
? Typekit aveva una bellissima soluzione: sfoglia la loro vasta libreria di caratteri, quindi copia e incolla del codice per implementarli sul tuo sito. ?L'unico problema con servizi come questo è che la struttura dei costi, $ 49- $ 99 se si desidera più di due siti, vieta a molti designer di utilizzarli. Google è arrivato e ha fatto quello che fanno sempre: ha preso un servizio premium e l'ha offerto gratuitamente.
La qualità e la varietà dei caratteri tipografici che troverai su servizi premium come Typekit sono comprensibilmente molto migliori di quelli che puoi ottenere gratuitamente, ma se non sono nel budget, Google Web Fonts è assolutamente la soluzione migliore.
La linea di fondo
Ecco il succo: Google Web Fonts è un modo completamente gratuito e super facile per implementare caratteri non standard sul tuo sito Web in modo appropriato e ampiamente supportato.
Scopri Google Web Fonts
Ora che ti viene l'idea, è ora di andare a dare un'occhiata alla pagina dei caratteri web di Google.
Quello che vedi qui è molto simile a un'applicazione di font standard. È fondamentalmente un enorme elenco di tutti i font disponibili con varie funzionalità di anteprima e filtro. Si noti che, al momento della stesura di questo documento, nella libreria sono presenti 506 famiglie di caratteri separate. Non male per un servizio gratuito!
Personalizzazione della tua anteprima
La parte più grande di questa pagina è occupata dalle anteprime dei font. Quando scegli un font, è assolutamente cruciale vederlo in modo simile a come lo implementerai. Alcuni font sono perfetti per i titoli ma assolutamente orrendi come copia del corpo.
? Quando scegli un font, è assolutamente cruciale vederlo in modo simile a come lo implementerai. ?Fortunatamente, Google Web Fonts ti consente di personalizzare la tua anteprima in modo che corrisponda al tuo caso d'uso. Puoi inserire il testo dell'anteprima personalizzato e modificare la dimensione dell'anteprima.
Quando voglio davvero dare una buona occhiata a un font che userò per un titolo, mi piace usare il? Word? vista. Il layout della griglia qui è anche il modo migliore per sfogliare rapidamente un sacco di caratteri.
La parte più importante è assicurarsi di visualizzare in anteprima qualsiasi copia del corpo che si intende utilizzare nella vista di paragrafo. È onestamente una buona idea evitare di usare un font personalizzato se si dispone di un sacco di copia del corpo, ma qui ci sono molti casi di utilizzo legittimi, quindi basta usare cautela.
Ordinamento e filtraggio
Come abbiamo visto sopra, ci sono oltre cinquecento famiglie di font da setacciare. Questo può essere un compito brutale se stai semplicemente scorrendoli uno alla volta, ma le opzioni di filtro e ordinamento qui possono semplificare notevolmente questo processo e aiutarti a capire esattamente quello che ti serve.
Ordinamento per popolarità e data di inserimento
Una cosa rapida che puoi fare subito è cambiare il metodo di smistamento. Mi piace vedere cosa è popolare o aggiunto di recente. È anche utile che tu possa facilmente ordinare in base a quanti stili ci sono nella famiglia. Ciò consente di afferrare una famiglia versatile che può essere utilizzata in varie larghezze e stili.
Filtro per caratteristiche e stile
Di gran lunga, il modo più utile per migliorare i risultati è utilizzare le opzioni di filtro. Ciò è particolarmente utile se si conosce il tipo di carattere tipografico che si desidera implementare. Ad esempio, se sai che vuoi un font scritto a mano, puoi disabilitare tutti gli altri tipi dai risultati.
Non finisce qui, Google va anche oltre permettendoti di modificare i risultati in base a spessore, inclinazione e larghezza dei personaggi. Questa è una funzionalità davvero interessante che non ho mai visto da nessun'altra parte.
Scegliere i caratteri
Google ha creato un sistema piuttosto versatile per la scelta e l'implementazione di vari tipi di carattere, il che significa che ci sono diversi modi per svolgere varie attività. Non c'è giusto o sbagliato qui, solo ciò che funziona meglio per te e il tuo flusso di lavoro unico.
Un modo per lavorare è quello di passare attraverso l'uso rapido? pulsante quando vedi un font che ti piace. Questo ti porterà a una pagina che mostra come usare quel tipo di carattere, che vedremo in seguito. Puoi anche usare il? Pop out? per vedere una finestra informativa che ti dice di più sul font.
Se utilizzerai più font, il modo più efficace per lavorare sarà utilizzare la? Collezione? caratteristica. Quando trovi diversi tipi di carattere che desideri utilizzare, seleziona "Aggiungi alla raccolta"? pulsante per vedere il font aggiunto alla tua lista nella parte inferiore dello schermo.
Da qui, puoi? Segnalibro? o? Scarica? la tua collezione utilizza i controlli nella parte superiore dello schermo o scegli tra? Revisiona? e? Usa? pulsanti nella parte inferiore dello schermo.
Usare i caratteri
Una volta che sei pronto per vedere questi tipi di carattere in azione, vai su? Usa? scheda. La prima cosa che vedrai qui è una lista dei caratteri nella tua collezione con la possibilità di attivare e disattivare le varie scelte. C'è anche un pratico indicatore che stima l'impatto che questi caratteri avranno sul tempo di caricamento della pagina.
Da qui, l'implementazione dei font è semplice come copiare e incollare del codice. Avrai tre opzioni tra cui scegliere per l'incorporamento iniziale: Standard, @import e JavaScript.
- Standard - Questo è un link standard per il foglio di stile che inserirai nella parte principale del tuo file HTML. Questo ti risparmia il passo di aggiungere la regola @import al tuo file CSS perché stai essenzialmente aggiungendo in un foglio di stile che ha già gettato.
- CSS - Se non si desidera collegare il foglio di stile generato automaticamente nell'intestazione, utilizzare la regola CSS @import visualizzata nella seconda scheda.
- JavaScript - Il codice qui riportato fa parte di WebFont Loader, che è una libreria JavaScript che è stata effettivamente sviluppata da Google e Typekit che ti darà un maggiore controllo sul caricamento dei font. Puoi leggere di più qui.
Una volta importati correttamente i font, tutto ciò che rimane è implementare i font nella famiglia di font CSS come faresti sempre. Lo snippet di questo è vicino al fondo:
Un esempio
Ora che comprendiamo tutti i vari frammenti e ciò che fanno, ti guiderò nel modo in cui di solito realizzo una raccolta di caratteri. La prima cosa che vorrai fare è prendere lo snippet HTML e lanciarlo vicino alla parte superiore del tuo HTML in questo modo:
Quindi, passa al CSS. Quello che faremo qui è molto diverso da quello che abbiamo visto sopra. Ecco il codice:
Innanzitutto, ho usato la stenografia dei font CSS per salvare un po 'di spazio. Questo ci permette di digitare tutte le caratteristiche del nostro font su una singola linea che è grandiosa.
Il primo valore che vedi è 400? sia nella h1 che nel paragrafo. L'ho inserito per assicurarmi che il browser mostri questi font con i pesi a cui erano destinati per essere visualizzati, e abbiamo visto prima che il peso previsto è 400.
Successivamente, ho impostato la dimensione del carattere seguita ma l'altezza della riga. Si noti che non ho usato alcun tipo di unità per l'altezza della linea, questo è un trucco ordinario che applicherà un'altezza della linea relativa che cambia con la dimensione del carattere.
Infine, inserisco i font di Google e utilizzo i miei backup perché non penso che dovresti mai utilizzare le scelte predefinite del browser per? Cursive ,? che è ciò che Google usa nel suo snippet.
Questo è tutto ciò che dobbiamo fare. Carica la tua anteprima dal vivo in un browser e dovresti vedere i tuoi caratteri personalizzati perfettamente visualizzati.
Vai a usarlo!
Hai appena imparato tutto su come utilizzare Google Web Fonts, ora è il momento di uscire e utilizzare questa conoscenza nel tuo sito. Sfoglia i font disponibili e pensa a come migliorare la tipografia nei tuoi progetti. Ricorda sempre che, con i caratteri personalizzati, less is more. Vacci piano e usa questo strumento in modo selettivo.
Se hai difficoltà a scegliere, assicurati di controllare la nostra raccolta di 10 fantastiche combinazioni di caratteri di Google che puoi copiare (fai clic su una seconda parte!).
Google Fonts
Google Fonts è una libreria di oltre 800 caratteri tipografici diversi, completamente pronta per essere incorporata nel tuo progetto web. Questa serie esamina i caratteri di Google e condivide esempi e combinazioni di caratteri interessanti che possono portare il tuo progetto al livello successivo.