Google Web Fonts è un servizio in cloud che ci permette di scaricare fonts gratuiti e open source da inserire nelle nostre pagine web. In questo modo potremo disporre di migliaia di fonts per impaginare in modo professionale le nostre pagine internet.
In tempi passati il web designer era costretto ad utilizzare solo i fonts installati nella macchina che ospitava il browser, incrociando i fonts comuni a Windows e Mac si calcola fossero circa 11 fonts. Per utilizzare fonts differenti era necessario utilizzare immagini, che appesantivano di molto il caricamento delle pagine web.
Google Web Fonts permette con poche istruzioni in CSS di scaricare al volo i fonts che ci servono per impaginare, mantenendo un rendering sempre perfetto della nostra pagina html.
Ecco come inserirli in una pagina HTML tramite CSS:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<link href='http://fonts.googleapis.com/css?family=Monsieur+La+Doulaise' rel='stylesheet' type='text/css'>
<style type="text/css">
h1 {
font-family: 'Monsieur La Doulaise', cursive;
font-size: 48px;
color: red;
}
</style>
</head>
<body>
<h1>Il contenuto del documento</h1>
</body>
</html>
Il risultato lo possiamo vedere qui sotto:
Nell’header del documento importo come css il font da Google specificandone il nome alla riga “family=Monsieur+La+Doulaise”, poi assegno a h1 nel CSS il font e le sue proprietà.
Le operazioni da eseguire per ottenere il codice corretto:
1- Reperire i fonts Google al seguente link: http://www.google.com/fonts/
2- Cliccare sul bottene “Add to Collection”.
3- A piè pagina apparirà una fascia con la dicitura “>Collection”, cliccare sul bottone a destra “Use”.
4- Spuntare a sinistra il font che si intende utilizzare, o più font contemporaneamente.
5- In fondo alla pagina si genererà il codice CSS da utilizzare nell’HTML.
6- Ovviamente copiare e incollare come mostrato in precedenza.
