In questo articolo vedremo "cos’è" e "come funziona" il servizio Google Fonts API grazie al quale è possibile implementare diversi tipi di font non standard all’interno di pagine web, con un notevole "guadagno creativo e stilistico" per la nostra attività di web design.
Un po’ di storia: CSS e i "font standard"
Sino all’avvento dei CSS3 gli sviluppatori di pagine web erano "costretti" ad utilizzare nei loro progetti unicamente le cosiddette font standard ovvero i set di caratteri universalmente diffusi e quindi presenti sulla stragrande maggioranza dei computer.
Nel momento in cui si sviluppa una pagina web, infatti, lo sviluppatore "dice al client" quale font utilizzare pre renderizzare il testo. A questo punto il client cerca tra i font presenti sul computer in uso per vedere se è disponibile quello definito dal web designer: se presente procede come da istruzioni mentre in caso contrario si utilizzerà un font di default.
Questo meccanismo imponeva ai webmaster, al fine di mantenere un risultato visuale omogeneo, di utilizzare sempre gli stessi font (come ad esempio Times New Roman, Verdana, Arial, ecc.) con una grossa limitazione dell’aspetto creativo del lavoro.
Finalmente i CSS3…
Con i CSS3, fortunatamente, è stata introdotta la possibilità per i webmaster di utilizzare nelle proprie pagine web anche font non standard: attraverso il comando @font-face, infatti, è possibile inviare al client il file (nei formati TTF, EOT, WOFF o SVG a seconda del browser in uso) contenente il set di caratteri da utilizzare per quella specifica pagina web.
In questo modo il client non deve più cercare se il font è già installato sul computer in uso ma utilizza direttamente il set di caratteri "linkato" nel foglio di stile.
Google Fonts API: cos’è e come funziona
Il servizio Google Fonts API nasce sulla scia delle novità introdotte da CSS3. In pratica nei laboratori di Google è stato sviluppato un sistema (basato sulla tecnologia appena descritta) che consente a tutti i web designer di incorporare nelle proprie pagine web, in modo molto semplice e con minimi interventi sul codice, font non standard senza dover implementare direttamente le direttive CSS3 e, soprattutto, senza dover caricare i file del font nel prorio spazio web (i file sono tutti sui server di Google).
Il funzionamento del servizio è molto semplice:
- si accede alla directory dei font disponibili;
- si sceglie il font preferito;
- si aggiunge una riga di codice al sito;
In questo modo il nuovo font-family è disponibile per essere utilizzato nel nostro foglio di stile.
Ma vediamo, passo passo, come effettuare tutte queste operazioni.
La directory Google Fonts
La prima cosa da fare, se vogliamo utilizzare le Google Fonts API, è accedere alla directory dei font disponibili di Google Font.
Il funzionamento è molto intuitivo anche se l’interfaccia è disponibile solo in inglese.
Nella colonna di sinistra sono presenti un motore di ricerca e dei filtri che consentono di individuare rapidamente il font che fa al caso nostro.
Se ne conosciamo il nome, ad esempio, basterà utilizzare la casella di ricerca per individuare subito il font che ci interessa; in caso contraro i filtri si rivelano uno strumento molto utile.
Grazie ai filtri, infatti, possiamo cercare i font in base a:
- Categoria (Serif, Sans Serif, Display, Handwriting);
- Thickness (spessore);
- Slant (inclinazione);
- Width (largezza del singolo carattere);
- Script (corrisponde alla lingua: latina, cirillica, greco, vietnamita,…)
Se sulla colonna di sinistra sono presenti i comandi di selezione, la parte centrale dello schermo è riservata al contenuto vero e proprio: cioè le font.
Attraverso le etichette in alto è possibile cambiare il metodo di visualizzazione. E’ possibile vedere, ad esempio, una singola parola (word):
Oppure una frase intera (paragraph):
E’ anche possibile cambiare la frase di anteprima (ad esempio impostando un testo a piacimento), aumentare o diminuire la dimensione del font e variare il criterio di ordinamento:
Per ciascun font (a prescindere dalla modalità di visualizzazione) sono presenti tre pulsanti:
- Quick Use: consente di utilizzare questo font sul nostro sito
- Info: apre un pop-up con tutti i dettagli del font, elenco dettagliato dei caratteri, statistiche di utilizzo, demo, ecc.
- Add to Collection: consente di aggiungere il font alla nostra collezione.
Ora vediamo nel dettaglio cosa sono e come funzionano le collezioni di font.
Le collezioni di Font
Il pulsante "Add to Collection" consente di salvare il font all’interno di una collezione personale di font preferiti: questa funzionalità è molto utile in una fase preliminare di "prima selezione" oppure per creare una sorta di "contenitore" di più font che si desidera utilizzare.
I font aggiunti alla Collection sono disponibili nell’apposita area espandibile posizionata sul fondo del nostro schermo. Espandendo quest’area troveremo tutti i font che abbiamo aggiunto alla nostra collezione.
Attraverso i 3 bottoni in alto possiamo variare il contenuto della parte superiore del nostro schermo:
- Choose mostra la directory di font per sceglierne di nuovi da aggiungere alla nostra collezione;
- Review mostra tutti i font presenti nella nostra collezione;
- Use consente di utilizzare tutti i font presenti nella collezione all’interno del nostro sito.
Utilizzare un font sul nostro sito
Per utilizzare un font (o una collezione di font) sul nostro sito clicchiamo sul bottone "Quick Use" (o "Use" in caso di collezione).
Impatto sui tempi di caricamento della pagina
La prima informazione che salta all’occhio è relativa ai tempi di caricamento:
E’ bene ricordare, infatti, che il client deve scaricare il font prima di utilizzarlo quindi questa operazione incide sui tempi complessivi di caricamento della pagina rallentandone il rendering.
Ogni font ha un impatto differente sui tempi di caricamento della pagina quindi è bene prendere in seria considerazione questo valore nella scelta del (o dei) font da utilizzare. E’ ovvio che qualora si decidesse di utilizzare una collezione di Font i tempi di caricamento saranno maggiori maggiore è il numero di font che desideriamo importare.
Il consiglio è "non eccedere" ed importare nella pagina solo ed esclusivamente ciò che vi serve: selezionate con cura gli eventuali subset e charset disponibili per il font prescelto evitando di checkare quelli che non vi interessano.
Importare il font nella nostra pagina web
L’inclusione del carattere prescelto (o dei caratteri se si tratta di una collection) all’interno di una pagina web può avvenire in tre modi diversi:
Le Google Fonts API supportano:
- Inclusione CSS standard
- Inclusione mediante comando @import
- Inclusione mediante Javascript
I punti 1) e 3) prevedono, semplicemente, il copia e incolla del codice fornito all’interno dei tag <head> e </head> della nostra pagina web. Ad esempio:
<!DOCTYPE html>
<html lang="it">
<head>
<!-- Google Fonts API -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<!-- Google Fonts API -->
</head>
<body>
<p>... contenuto della pagina ...</p>
</body>
</html>Oppure
<!DOCTYPE html>
<html lang="it">
<head>
<!-- Google Fonts API -->
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Open+Sans::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
<!-- Google Fonts API -->
</head>
<body>
<p>... contenuto della pagina ...</p>
</body>
</html>L’opzione al punto 2), invece, prevede l’utilizzo del comando @import direttamente all’interno del nostro foglio di stile CSS. Ad esempio:
<!DOCTYPE html>
<html lang="it">
<head>
<style type='text/css'>
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
/*
NOSTRE REGOLE CSS
...
...
...
*/
</style>
</head>
<body>
<p>... contenuto della pagina ...</p>
</body>
</html>Il risultato finale, ovviamente, è il medesimo.
Integrare il font nei nostri CSS
Una volta incluso uno dei tre codici disponibili, il font diventa "utilizzabile" all’interno delle nostre normali direttive CSS.
In pratica il nome del font è utilizzabile all’interno della proprietà font-family che definisce il carattere da usare per specifici tag, classi o ID.
Esempio:
h1 {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 28px;
}Oltre che all’interno di un foglio di stile, ovviamente, il font può essere utilizzato anche con una notazione in linea:
<h1 style="font-family: 'Open Sans', sans-serif;">Titolo...</h1>Conclusioni
Google Fonts API offre uno strumento rapido e veloce per implementare font non standard all’interno di pagine web sfruttando le nuove potenzialità di CSS3.
La vera forza di Google Fonts API, tuttavia, non è tanto nella facilità di implementazione quanto nella possibilità di scegliere tra diverse centinaia di font open source già pronte ed ottimizzate nei vari formati richiesti dai vari browser.
Il tutto, inoltre, con un risparmio di banda per noi in quanto i file delle font non risiedono sul nostro server ma su quelli, affidabilissimi ed ultra-veloci, di Big G.
