Google Font Directory dietro le quinte

Con le Google Font API è semplicissimo integrare nei nostri progetti tipi di caratteri diversi da quelli web-safe, universalmente diffusi su tutti i device. Le operazioni eseguite dietro le quinte non fanno altro che fornire il giusto codice CSS a seconda del browser.

CSS 3 reintroduce la specifica @font-face, dopo che essa non aveva trovato largo uso in seguito all'introduzione nello standard CSS 2 e dopo essere stata rimossa nei CSS 2.1. Oggi è supportata appieno dalle ultime versioni di Chrome, Firefox, Safari e Opera, mentre Internet Explorer, che in verità  supporta la specifica sin dalla versione 4, la adotta tuttavia in maniera incompleta. Infatti i font utilizzabili 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 di un font .ttf dovremo prima convertire il file nel formato EOT, scrivere il codice CSS prima per IE e, poi, quello per gli altri browser. Questi passaggi è tutto cià che fanno le Google Font API quando noi le colleghiamo ad un nostro documento: fornire il giusto codice CSS e il file TTF o EOT a seconda del browser con il quale l'utente visita il nostro sito.

Dall'esempio di un nostro articolo precedente, aprendo il link http://fonts.googleapis.com/css?family=Tangerine con IE otteniamo il codice CSS:

@font-face {
  font-family: 'Tangerine';
  src: url('http://themes.googleusercontent.com/font?kit=_jMq7r9ahcBZZjpP8hftNA');
}

Con gli altri browser otteniamo:

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

Si noti che aprendo la url del font presente nel CSS viene scaricato un file .oet con IE e un file .ttf con gli altri browser.