Google Font Directory è un nuovo progetto in beta di Google che permette di usare famiglie di Font non inclusi nella lista dei Font-Standard.
Come molti sviluppatori sapranno, durante la progettazione di un sito web, i font che dovranno essere indicizzati in un secondo momento devono essere di tipo testo e inclusi nella lista dei Font-Standard.
Google Font Directory è una directory di Font esclusivi, che tramite un codice HTML+CSS, avremo la possibilità di usarli senza preoccuparci di verificare se il font sia della famiglia Font-Standard.
Vediamo insieme come utilizzare queste API di Google sui Font.
Selezioniamo il Font che ci interessa, in questo caso proviamo Droid Sans, e andiamo a prelevare il codice per includere il carattere.
Dovremo inserire il seguente codice tra i tag <head> e </head> della nostra pagina web
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
Inoltre se volessimo impostare lo stile bold, italico o bolditalico dovremo inserirlo nel codice in questo modo:
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>
Nel nostro foglio di stile CSS dovremo andare a richiamare il font usato Droid Sans.
h1 { font-family: 'Droid Sans', arial, serif; }
In questo caso stiamo indicando per i nostri h1 il font Droid Sans.
Google ha introdotto questa nuova tecnica in quanto cerca di evitare che per inserire font speciali si usino delle immagini o script che possano rallentare l’ottimizzazione e l’indicizzazione di una pagina web.
Per quanto riguarda la compatibilità siamo coperti su Chrome, Firefox, Safari mentre su Internet Explorer poca nitidezza del font e Opera nulla.
Questo nuovo progetto potrebbe portare svariate migliorie per l’indicizzazione su caratteri ottimizzati anche se non Font-Standard.
Come vedremo al workshop Go!WebDesign durante il mio intervento, grazie ai CSS3 sarà possibile utilizzare font da noi scelto su qualsiasi macchina .
Questa tecnica sarà attuata grazie al modulo @font-face, purtroppo però attuamente oltre a non essere raccomandata dal W3C in quanto i CSS3 sono ancora in fase di definizione, non tutti i browser lo supportano.
Nella directory attualmente sono disponibili solo una ventina di font, si spera che verranno integrati molti altri ancora.
Un’ottima mossa da parte di Google per l’ottimizzazione e indicizzazione di Font speciali.
Prezzo: EUR 24,12
Promozione: EUR 21,13
Prezzo: EUR 24,95
Promozione: EUR 21,21
Prezzo: EUR 30,00
Promozione: EUR 28,00
Prezzo: EUR 17,73
Promozione: EUR 15,14
La progettazione di un logo è un processo molto lungo, spesso è molto difficile trovare idee che coincidano con le esigenze dei clienti. Quando si progetta un logo aziendale bisogna tenere conto di diversi aspetti: il tipo di font, colori, equilibrio e simbolismo per citarne alcune. Lo scopo di questo articolo è quello di mostravi [...]
Scorsa settimana ho avuto la fortuna di partecipare a un webinar di Google, un corso di formazione di circa un’ora via web. In questo evento è stato spiegato come preparare con piccoli passi la propria presenza online, in questo caso ognuno di noi era rappresentato come brand. Questo webinar è stato molto interessante, seppur molto [...]
Oggi vediamo alcuni indispensabili consigli SEO per migliorare la visibilità dei progetti web focalizzandosi sulle pagine e articoli, con lo scopo di ottimizzare e strutturare la predisposizione all’indicizzazione dei nostri progetti web sui motori di ricerca. Ormai anche il Web Designer, soprattutto se è ha intrapreso la carriera da Freelance, deve assolutamente conosce alcune nozioni base [...]
Uno dei fattori più importanti quando si realizza un sito internet ed in particolare le/la sezione form registrazione è la sua ottimizzazione, per evitare che gli utenti abbandonino il sito internet. Questo è di vitale importanza in tutti i siti internet ma in particolare per i siti e-commerce (si rischia che l’utente abbandoni il carrello). [...]
Oggi voglio parlati delle opportunità di business nel fare Digital Publishing, mai sentito parlare? Il Digital Publishing è rivolto a tutti i designer,agenzie pubblicitarie e aziende, che hanno lo scopo di distribuire, e ottimizzare contenuti e pubblicazioni coinvolgenti per dispositivi tablet. In modo particolare cercherò di farti capire perchè i Cataloghi Digitali per iPad sono [...]
A seguito della prima Market Conference del 29 febbraio scorso, il team di Facebook ha annunciato diverse novità relative alla nuova Timeline delle pagine e alle modalità di Ads nel social network. Proprio quest’ultime hanno subito una grande revisione, chiamiamola così, e sono state introdotte Le nuove Premium Ads, I Post in page e Le [...]
Se ti stai appassionando al settore del Digital Publishing sicuramente avrai giù sentito parlare dell’Adobe Digital Publishing Suite. Per i designer che non fanno della programmazione la loro arma di business questa è sicuramente un opportunità più unica che rara di ampliare il proprio settore di guadagno e dando anche uno sguardo al futuro. Siccome [...]

Fabio
21 maggio 2010
Questa proprio non la sapevo! Come l’80% di quello che tiri fuori!
Mi sembra davvero una gran bella cosa, grazie mille!
Giorgio
21 maggio 2010
Grazie per la dritta!
Con i CSS3 come dici tu è ancora troppo presto anche se è molto interessante come funzione..
Miky
21 maggio 2010
Giorgio ha scritto:
Secondo voi è corretto obbligare un visitatore a scaricare centinaia e centinaia di font a seconda del sito? Io trovo che sia una forzatura non gradita…
claudio
21 maggio 2010
Ciao JD, è vero il w3c non raccomanda l’utilizzo del @font-face, ma io l’ho provato con vari browser e funziona.
TheMaker
21 maggio 2010
Guardate che comunque utilizza ugualmente la proprietà @font-face dei CSS3; velocizza solo il lavoro ;)
Julius
21 maggio 2010
@claudio: ciao si in effetti funziona su vari browser, il vero problema sono le versioni in circolo, non tutte supportano ancora questa codifica..
Sapete meglio di me che i vari aggiornamenti dei browser sono poco diffusi se non vi è una manutenzione tecnica, e spesso si tende a utilizzare versioni obsolete.
Paolo
21 maggio 2010
Scusate ma sono l’unico a notare che su firefox 3.6.4 per mac il tutto non funziona?
Julius
21 maggio 2010
@Paolo: Non sei l’unico tranquillo :) il progetto è in beta, probabilmente ci staranno lavorando..
Come dicevo a claudio riguardo @font-face, anche per questo progetto il difficile è far combaciare tutte le versioni sia su pc che mac.
Paolo
21 maggio 2010
@ Julius:
Ah ok..non volevo rompere, era solo per capire data l’annunciata compatibilità con firefox.
Grazie
Texas138
21 maggio 2010
A me su firefox 3.6.3 per mac va a meraviglia :)
cmq occhio… come al solito quando si usa @font-face bisogna essere consapevoli che non tutti i browser lo digeriscono…
come al solito… bisogna ponderare bene le proprie scelte in fase di sviluppo… ;)
pero’ per noi sviluppatori è ottimo!!! :D
skimbu.it
21 maggio 2010
Julius, secondo te va bene usare Cufon?
Julius
21 maggio 2010
@skimbu.it: se non ricordo male non mi piaceva molto in quanto usa JS e non rende selezionabile il testo…
Questo non vuol dire che non bisogna usarlo, è una scelta…
skimbu.it
21 maggio 2010
@ Julius:
Grazie, perchè lo sto provando, anche se lo userò solo per i titoli dei post :D
Francesco
21 maggio 2010
@ Julius:
Si Cufon utilizza JS ma il testo è selzionabile
Texas138
21 maggio 2010
Cufon a me ha dato sempre un po’ di problemi con ie, con le vecchie versioni di Firefox… forse anche Opera…ma non ricordo!!
alessandro
21 maggio 2010
ottimo sopratutto per uno come me che ha una grossa esigenza parlando in termini di font, grazie julius davvero un ottima news
Deja_rulez
24 maggio 2010
se può interessare qui trovate un generatore di codice e font
crosswbrowser che utilizza il fontface.
Funziona su tutti i browser, ovviamente con leggere differenze di alias a seconda del tipo di font e del sistema operativo.
Fontface Generator
ciaaps
DoZ
20 luglio 2010
Nella pagina che ho dedicato ai font gratuiti che si trovano nel web mi sono soffermato – in un commento – anche su un’ottima soluzione all’uso dei font “non standard” nel design di pagine html.
Non si tratta dei vari Sifr, Cufon, ecc. ma bensì di uno strumento online che converte qualsiasi dei nostri font (Ttf, Otf, ecc.) in font usabili nel web tramite l’uso di @fontface.
Si chiama Font Squirrel, ed il bello è che da quel che ho potuto provare finora le pagine create con questo “aiuto” si vedono correttamente su ogni browser!
CIAO!!