Come integrare Google Fonts con il proprio sito

Come integrare Google Fonts con il proprio sito

Per anni la scelta dei font nel web è stata limitata a poche famiglie tipografiche.

Arial, Times New Roman, Helvetica, Verdana la facevano da padrone. Questo accadeva perchè la scelta era limitata ai font supportati dai dispositivi utilizzati dagli utenti.

Da qualche anno si sono sviluppati numerosi servizi di Web Fonts che sono andati a colmare questo problema, dando maggiore possibilità di scelta allo sviluppatore.

Il servizio più famoso e utilizzato è Google Fonts, un "raccoglitore" di numerose famiglie tipografiche completamente gratuito.

Come si utilizza Google Fonts e come si integra con il proprio sito?

Per prima cosa accediamo al sito ufficiale www.google.com/fonts

Scegliamo la famiglia o famiglie di font che più ci interessano cliccando il bottone "Add to collection"

Una volta selezionati tutti i font di nostro interesse clicchiamo in basso a destra il tasto "Use".

A questo punto si aprirà una pagina che ci farà scegliere lo spessore dei font selezionati (light, bold, etc.) e ci mostrerà anche il tempo di caricamento necessario per visualizzarli nella nostra pagina web.

Dopo aver settato le nostre preferenze scoriamo verso il basso e copiamo il link che troviamo nella sezione 3 sotto la scritta "Add this code to your website".Dovrebbe essere qualcosa simile a questo:


<link href='https://fonts.googleapis.com/css?family=X|Y' rel='stylesheet' type='text/css'>

Una volta copiato lo incolliamo all'interno del' <head> del nostro sito.

Ora possiamo richiamare i font scelti direttamente da css attraverso la proprietà font-family.

Commenti

Ancora nessun commento per questo articolo

Lascia un commento: