Google Font Directory dietro le quinte
Mercoledì 26 Maggio 2010 - 08:18
di Maico Orazio
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.
Commenti
1
Personalmente non mi piace l’idea di utilizzare servizi esterni per i font. E’ vero che si “risparmia” banda e server ma se proprio dovessi utilizzare un font particolare preferirei uploadarlo sul mio server.
# - postato da PiccoloSocrate - 26 Maggio 2010 - 10:36
2
PiccoloSocrate, c’è una bella differenza tra server esterni e server google. Mi fido di più dei suoi che del mio a dir la verità.
E comunque, queste soluzioni sono utili proprio perché per queste tecnologie ci sono dei problemi cross-browser, e qualcun’altro risolve lo sbattimento al posto tuo.
# - postato da Slam - 26 Maggio 2010 - 10:43
3
Quello che mi preoccupa sono le performance della soluzione:
1) una ricerca dns per fonts.googleapis.com
2) il caching sembra fatto male: specifica un max-age di 7 giorni, ma l’expire è immediato, e questo vuol dire un ricaricamento del file per ogni pagina
3) altra ricerca dns per themes.googleusercontent.comSono due ricerche dns in più per visitatore ed un file css in più (tra l’altro non cachabile) per pagina.
Bisognerebbe vedere se Google permette l’uso dei font in locale, in quel caso ce la si caverebbe con una ricerca dns e un css specifico per gli explorer tramite i commenti condizionali che tutti già dovrebbero usare.
# - postato da Riot - 26 Maggio 2010 - 11:01
4
Errata corrige
Se si usassero i font in locale non servirebbe neppure una ricerca dns aggiuntiva.# - postato da Riot - 26 Maggio 2010 - 11:50
5
Perchè con Firefox sia Windows che Mac non mi funzionano ste Google Font API? con tutti gli altri browser vedo caricati correttamente i vari fonts
# - postato da Marco - 27 Maggio 2010 - 09:45
6
L’ho provato e funziona… ma i font li vedo poco definiti, cioe’ hanno un alias, questo sia su IE7 Firefox 3.6 che Chrome 5, uso XP e il cleartype e’ attivo, ho letto di un altro utente che lamentava la stessa cosa… sara’ forse una mia impostazione???
# - postato da Noc77 - 27 Maggio 2010 - 11:48
7
@Noc77
secondo me il problema è di noi qui a Salerno e provincia :DDD# - postato da Giuliano Romano - 27 Maggio 2010 - 16:03