Google Font Directory: Usare Font (no-standard)

- Letture: 3.017

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.

Come includere il Font?

HTML

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'>

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.

Quali sono i veri vantaggi?

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.

Alternative?

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.

Conclusioni

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.

Stratega, Docente, Speaker con più di 12 anni di esperienza in strategie creative multicanale. Oggi sono Partner & Chief Innovation Officer di ThinkingHat, Innovation Studio specializzato in tecnologie emergenti per aziende e brand audaci.

18 Commenti

  1. Questa proprio non la sapevo! Come l’80% di quello che tiri fuori!

    Mi sembra davvero una gran bella cosa, grazie mille!

  2. Grazie per la dritta!

    Con i CSS3 come dici tu è ancora troppo presto anche se è molto interessante come funzione..

  3. Giorgio ha scritto:

    Con i CSS3 come dici tu è ancora troppo presto anche se è molto interessante come funzione..

    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…

  4. Ciao JD, è vero il w3c non raccomanda l’utilizzo del @font-face, ma io l’ho provato con vari browser e funziona.

  5. @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.

  6. Scusate ma sono l’unico a notare che su firefox 3.6.4 per mac il tutto non funziona?

  7. @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.

  8. @ Julius:

    Ah ok..non volevo rompere, era solo per capire data l’annunciata compatibilità con firefox.

    Grazie

  9. Texas138

    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

  10. @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…

  11. Texas138

    Cufon a me ha dato sempre un po’ di problemi con ie, con le vecchie versioni di Firefox… forse anche Opera…ma non ricordo!!

  12. ottimo sopratutto per uno come me che ha una grossa esigenza parlando in termini di font, grazie julius davvero un ottima news

  13. Deja_rulez

    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

  14. 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!!

Commenti