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, quello con cui siamo abituati a incorporare i fogli di stile. L'URL punta però alle API di Google. Attraverso questa dichiarazione stabiliamo quale famiglia di font, tra quelli presenti nella Google Font Directory, intendiamo utilizzare. Nel nostro caso abbiamo scelto il font Lobster. In pratica, la sintassi generica per incorporare un certo font è la seguente:
<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 con la chiamata alle API come primo elemento della sezione 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 |. Nell'esempio abbiamo usato Cantarell per un paragrafo e Josefin Sans Std Light per il titolo 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 con i font incorporati. Si tratta pur sempre di risorse che l'utente deve scaricare e su connessioni lente potrebbero nascere problemi. Il principale è dato dal comportamento di default di tutti i browser (tranne Firefox): fin quando il font non è disponibile il testo formattato con quel font viene sostituito da uno spazio bianco.
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 del font Tangerine e quella italic del font Inconsolata.
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 che precede il richiamo ai font Tangerine e Cantarell. Serve a stabilire quale fornitore di font utilizzare. In alternativa a Google e alla sua directory, infatti, è possibile usare anche il servizio Typekit (di cui abbiamo parlato in 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.
