CSS  »  Articoli  »  CSS fonts stampa e tipografia 

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:

• Web fonts con i CSS in cinque minuti
• Web fonts con Typekit
• Usare i web fonts con i CSS

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.

Altri articoli

Altre guide

Altre newsletter