CSS3 @font-face e Google Font Directory: verso la scomparsa dei web safe font

Uno dei problemi classici della tipografia sul web è sempre stato il set limitato di font utlizzabili. Il set di catatteri utilizzato per la pagina web doveva essere obbligatoriamente presente sul computer dell’utente, limitando quindi la scelta tra quei pochi universalmente diffusi su tutti i device.

Le specifiche CSS 2.0 prevedevano il @font-face rule attraverso il quale specificare l’indirizzo internet dal quale scaricare il font qualora mancasse sul computer dell’utente. La specifica tuttavia non ha mai trovato largo uso ed è stata rimossa nei CSS 2.1

CSS 3 reintroduce la specifica @font-face.

@font-face {
  font-family: yourNameForTheFont; /* required */
  src: source;						/* required */
  font-weight: weight;				/* optional */
  font-style: style;				/* optional */
}

I browser come Chrome e Firefox (ultime versioni) la supportano appieno.

E il malfamato Internet Explorer? In verità IE supporta la specifica @font-face sin dalla versione 4 (tempi antichissimi). Tuttavia, come è frequente per i prodotti Microsoft, la adotta in maniera incompleta. I caratteri utilizzabili infatti non possono essere TrueType (.ttf uno dei più diffusi standard per i font) bensì  Embedded OpenType (.eot), un formato proprietario di Microsoft, derivato dallo standard OpenType.

Volendo quindi adottare la specifica @font-face sul nostro sito, disponendo ad esempio del font myspecial.ttf MySpecialFont da caricare sul nostro server dovremmo:

1. Convertire il file myspecial.ttf in formato EOT utilizzando ad esempio questo strumento di conversione online oppure utilizzando la piccola applicazione ttf2eot scaricabile da Google Code.

2. Scrivere il codice CSS prima per IE e, poi, quello per gli altri browser:

	@font-face {
	  font-family: "MySpecialFont";
	  src: url( /cartelladeifont/myspecial.eot ); /* IE */
	}

	@font-face {
	  font-family: "MySpecialFont";
	  src: local("MySpecialFont"),
          local("MySpecialFont-Regular"),
          url(  /cartelladeifont/myspecial.ttf  ) format("truetype"); /* non-IE */
	}

Da notare che
src: local("MySpecialFont"), local("MySpecialFont-Regular")
serve a controllare che il font non sia già preinstallato sul computer dell’utente. Possono essere specificati più nomi (come nell’esempio) con i quali il font potrebbe essere chiamato sul computer locale.

A questo punto potremo utilizzare il font MySpecialFont nei nostri stili CSS, ad esempio nelle intestazioni h1:

h1 {
	font-family: "MySpecialFont", Arial, Helvetica, sans-serif;
     }

Consiglio, come sempre, di indicare una lista di font alternativi che siano il più possibile simili al nostro prescelto “MySpecialFont”. Supponendo, ad esempio, che MySpecialFont sia un san-serif, qualora il browser non supportasse il download verrebe comunque mostrato un Arial (anzichè un serif come il Times New Roman di default).

Google Font Directory. La strada più facile.

Google ha presentato ieri la Google Font Directory e le Google Font API per rendere facilmente fruibili e disponibili a tutti una collezione di font open source.

Volendo ad esempio usare il font Molengo sarà sufficiente inserire sulla nostra pagina il seguente codice:

<link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>

Sarà a questo punto Google a fornire il giusto codice CSS e il file TTF o EOT a seconda del browser con il quale l’utente si collegherà al sito.

Aprendo il link http://fonts.googleapis.com/css?family=Molengo

con IE otteniamo il codice:

@font-face {
  font-family: 'Molengo';
  src: url('http://themes.googleusercontent.com/font?kit=txVk61PTIsDrQQj2fK-76Q');
}

con Firefox otteniamo:

@font-face {
  font-family: 'Molengo';
  font-style: normal;
  font-weight: normal;
  src: local('Molengo'), url('http://themes.googleusercontent.com/font?kit=txVk61PTIsDrQQj2fK-76Q') format('truetype');
}

e con Chrome:

@media screen {
@font-face {
  font-family: 'Molengo';
  font-style: normal;
  font-weight: normal;
  src: local('Molengo'), url('http://themes.googleusercontent.com/font?kit=txVk61PTIsDrQQj2fK-76Q') format('truetype');
}
}

Si noti anche che aprendo la url del font present nel CSS
http://themes.googleusercontent.com/font?kit=txVk61PTIsDrQQj2fK-76Q
viene scaricato un file .ttf con Firefox e Chrome e un file .eot con Internet Explorer.

Un consiglio è quello comunque di verificare la visualizzazione su più computer con differenti schermi – risoluzioni – sistemi operativi. Ho notato che alcuni di questi font come ad esempio il Josefin non sono bene leggibili, specie quando sono di ridotte dimensioni.

Font commerciali

Vi ricordo infine che molti font non sono gratuiti e non posso essere liberamente usati sui vostri siti. Ad esempio, anche qualora si trovasse sul vostro computer, non potreste utilizzare il font Futura, trasformarlo in EOT, caricarlo sul vostro server e utilizzarlo per le vostre pagine tramite @font-face

Risorse

Web Embedding Fonts Tool (WEFT) della Microsoft per convertire i font TTF in EOT.

@font-face browser support per una panoramica del supporto di @font-face sui vari browser

Google Font Directory una collezione di font liberamente utilizzabili e implementabili con estrema facilità