Forse avete sentito che Google ha centinaia di font web gratuiti pronti per essere utilizzati nel vostro prossimo progetto. Ma come farete a usarli sul vostro sito? Questa guida vi illustra i passaggi da seguire per utilizzare Googlefont sul vostro sito. Dovreste impiegare meno di 10 minuti!
Quando nasce Googlefont?
Google Fonts è stato lanciato per la prima volta nel 2010 come iniziativa ingegneristica volta a far progredire il Web e a renderlo più veloce.
Lanciato nel 2010, Googlefont è rapidamente cresciuto fino a diventare la più grande e vasta raccolta open-source di caratteri tipografici sul web.
Tutti i caratteri di Google Fonts sono liberi di essere utilizzati sia per scopi commerciali che personali.
Il sito di Google Fonts consente a chiunque di scegliere e utilizzare rapidamente i vari caratteri per le proprie esigenze di design.
Graphic designer, UX designer, ricercatori, sviluppatori, web designer, blogger, social media manager, imprenditori, artisti, studenti, insegnanti, fotografi e altri ancora. Ho visto i font di Google utilizzati in cartelloni pubblicitari, poster, presentazioni, inviti a nozze, siti web e libri.
Collaborazioni
Googlefont collabora con designer di caratteri, fonderie di caratteri e comunità di design di tutto il mondo.
Questi individui e organizzazioni creano i caratteri tipografici che si vedono su Google Fonts.
Per esempio, Lukasz Dziedzic è un designer di caratteri indipendente e ha disegnato il popolare carattere Lato. Uno studio di font chiamato ParaType ha progettato il font PT Serif.
Ogni link all’API di Google Fonts presente nel sito offre a Google l’opportunità di eseguire un ulteriore data mining. Sì, ma non credo che questo debba impedirvi di usare Google Fonts.
L’altro motivo, più rassicurante, per cui Google si preoccupa dei font è che vuole portare i font web open-source a prezzi accessibili alle masse.
Vuole costruire un web più veloce, più bello, più facile da navigare e da usare.
Inoltre, l’azienda ha avviato Google Fonts nel 2010, quando servizi di questo tipo erano davvero necessari, quindi sta risolvendo un altro problema che abbiamo con Internet.
Passiamo ora a come utilizzarli.
Utilizzo di Googlefont
Andate su Google Fonts, dove potrete scegliere 853 famiglie di caratteri, e non solo!.
Il sito consente di filtrare i risultati per stile, lingua, popolarità e peso.
Googlefont vi mostra anche nuovi font se andate sulle pagine in evidenza.
Se avete in mente il nome di una famiglia di caratteri, potete cercarlo. Ogni famiglia di caratteri ha un pulsante “più” in alto a destra.
Facendo clic sul pulsante più si aggiunge la famiglia di caratteri a un “cassetto di selezione” che appare nella parte inferiore dello schermo.
Il “cassetto di selezione” è il luogo in cui vengono visualizzati i font aggiunti. È anche il luogo in cui troverete il codice da aggiungere al vostro sito.
È anche possibile scaricare i font sul desktop.
Dal “cassetto delle selezioni”, copierete il codice da incollare nel vostro HTML e CSS.
Affinché Google Fonts funzioni sul vostro sito, dovete sia avere una famiglia di font collegata all’API di Google Fonts (nell’HTML) sia avere una famiglia di font specificata (nel CSS).
Questa è l’ultima opportunità per aggiungere vari pesi e stili dei font nelle famiglie di font prima di aggiungerli al sito.
Aggiungete solo i pesi e gli stili dei caratteri che sapete che vi serviranno, perché più font aggiungete, più lento sarà il caricamento sul vostro sito.
Incollare i codici HTML e CSS
Bene, quindi abbiamo praticamente finito.
Ora non ci resta che copiare e incollare il codice HTML e CSS sul nostro sito.
Per prima cosa, copiate l’HTML del link nell’intestazione del vostro documento HTML.
Infine, dobbiamo copiare e incollare le regole CSS nel file CSS.
Se state aggiungendo solo un singolo font di Google al vostro sito, potete aggiungere le regole CSS Font Family nel tag body.
Altrimenti, è necessario assicurarsi di aggiungerlo all’elemento giusto nel file CSS.
Ricordate di salvare e aggiornare!
Aggiornate il file locale e vedrete la nuova famiglia di font… in questo caso, un font di Google chiamato Lato.
Avete implementato con successo il vostro primo Googlefont sul vostro sito. Inoltre, sono il creatore di Font Pair, che vi aiuta a combinare i font di Google.
Date un’occhiata alle nostre nuove pubblicazioni su Medium per altri post sulla tipografia!
