Il principio che è alla base dei cosiddetti web fonts è molto semplice. Invece di essere limitati, nelle scelte tipografiche, ai font installati sul computer degli utenti, possiamo allargare il campo e le possibilità creative sfruttando la direttiva CSS @font-face per far scaricare e quindi usare qualunque carattere tipografico, con l'unico vincolo rappresentato dalla licenza d'uso dello stesso.
Con un supporto ormai esteso a tutti i browser, questa tecnica è diventata uno dei temi caldi degli ultimi mesi. Abbiamo documentato i meccanismi di base in due articoli:
In questo appuntamento parleremo invece di Google Font API, il servizio appena lanciato da Google che promette di semplificare ancor di più l'adozione dei web fonts ampliando al tempo stesso le possibilità creative dei web designer.
Come funziona: le basi
Il funzionamento di Google Font Api è davvero alla portata di tutti. Big G. mette infatti a disposizione la sua infrastruttura (non è necessario scaricare in locale o sui nostri server nemmeno un file) e anche una collezione di font (la Google Font Directory) liberamente utilizzabili nei nostri progetti. Tutto quello che bisogna imparare è la definizione della sintassi e delle regole per invocare i servizi. Cominciamo.
Il primo esempio è un buon punto di partenza. Se si osserva la sezione head, si nota subito la presenza di questa riga:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">Un tradizionale tag link
Lobster
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=NomeDelFont">Per evitare di incorrere in problemi nella resa su Internet Explorer è consigliabile inserire il tag link
head
A questo punto, abbiamo a disposizione un nuovo font (Lobster nell'esempio) da usare nel nostro CSS. Dobbiamo solo scegliere a quali elementi della pagina vogliamo applicarlo e seguire le regole consuete. Nell'esempio abbiamo usato Lobster per formattare un titolo h1:
h1 {
font-family: 'Lobster', serif;
font-size: 48px;
}Alcuni dei font messi a disposizione da Google hanno nomi composti da più parole. In questo caso, quando si richiama il servizio, è necessario collegare le singole parole che compongono il nome attraverso il segno +. È quanto abbiamo fatto nel secondo esempio, in cui il titolo è stato formattato usando il font Josefin Sans Std Light. Ecco il codice HTML:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light">E quello CSS:
h1 {
font-family: 'Josefin Sans Std Light', serif;
font-size: 48px;
}Si noti come in entrambi gli esempi, nella definizione di font-family, si sia usata la norma consueta, ponendo accanto al font predefinito il riferimento alla famiglia generica.
Il servizio consente di incorporare e usare più di una famiglia di font. Anche in questo caso nulla di complicato, è sufficiente adottare questa sintassi (esempio 3):
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cantarell|Josefin+Sans+Std+Light">Come si vede, le famiglie di font vanno separate attraverso il carattere |
h1
h1 {
font-family: 'Josefin Sans Std Light', sans-serif;
font-size: 48px;
}
p {
font-family: 'Cantarell', sans-serif;
font-size: 14px;
}Il consiglio, ovviamente, è quello di non esagerare
Nell'impostazione di base che abbiamo visto in tutti gli esempi, le API di Google servono all'utente la versione regolare del font. È però possibile invocare il caricamento di altre varianti, quella in grassetto per esempio, o quella in corsivo, o entrambe. Questa la sintassi (per i dettagli rimandiamo alla documentazione):
http://fonts.googleapis.com/css?family=Tangerine:bold|Inconsolata:italicNel codice qui sopra carichiamo la variante bold italic
Usare Javascript: il Web Font Loader
Per avere un maggiore controllo sulla resa dei font, Google mette a disposizione uno strumento alternativo alle API di base: il Web Font Loader, una libreria Javascript di facile utilizzo.
Ecco l'esempio 4, che sfrutta proprio questo sistema. Per prima cosa inseriamo il richiamo alla libreria con il consueto tag script:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>Procediamo quindi al caricamento delle famiglie di font che ci interessano e all'inizializzazione dello script:
Una nota esplicativa va fatta solo per un punto. Osservate quel google questo articolo
WebFont.load({
typekit: 'identificativoDelKit'
});Nulla impedisce, poi, di usare entrambi i servizi:
WebFont.load({
google: {
families: [ 'Tangerine', 'Cantarell' ]
},
typekit: 'identificativoDelKit'
});La parte Javascript termina qui. Ora attenzione. Lo scopo principale del Web Font Loader, lo accennavamo, è quello di avere un maggiore controllo sulla resa dei font. Significa, per esempio, stabilire che fino all'avvenuto caricamento del font il testo verrà visualizzato con un font generico alternativo. Si evita così il problema dello spazio bianco cui si accennava prima.
Il meccanismo che regola il tutto è basato sui CSS. Quando la libreria viene caricata, infatti, vengono automaticamente aggiunte al tag html due classi: .wf-inactive (il font non è disponibile) e .wf-active (il font è disponibile). A questo punto, sfruttando il meccanismo noto dei CSS, possiamo stabilire delle regole specifiche per le due situazioni. Ecco cosa abbiamo fatto nell'esempio:
.wf-inactive p {
font-family: serif;
}
.wf-active p {
font-family: 'Cantarell', serif;
font-size: 16px;
}
.wf-inactive h1 {
font-family: serif;
}
.wf-active h1 {
font-family: 'Tangerine', serif;
font-size: 26px;
}Spieghiamo. Fin quando il font Cantarell non sarà disponibile il testo dei paragrafi verrà visualizzato con un generico serif; quando il font sarà caricato e disponibile, il testo sarà visualizzato con un Cantarell in 16px. Un ragionamento analogo è si applica al titolo h1.
Per ulteriori opzioni di configurazione rimandiamo anche in questo caso alla documentazione ufficiale.
Tutti gli esempi sono disponibili per il download.
