home

font-face e Webfonts: come usarli


Friday, September 11th, 2009

L’articolo è un po’ lungo per completezza. La prima parte introduce la situazione attuale e futura dei webfont, mentre la seconda è una guida per l’uso di @font-face. ecco i link per le sezioni:
I – Webfonts, introduzione e novità
II – @font-face, come usarlo

Helvetica_Lars_Williem_Veldkampf.jpg
foto: © Lars Williem Veldkampf (photostream)

Introduzione ai webfonts:

Quando riguarda il web design la tipografia è sempre un argomento difficile. Da sempre i designers sono stati costretti ad usare i cosidetti web-safe fonts.
Quando specifichiamo i typefaces nella proprietà font-family del nostro foglio di stile stiamo dicendo al browser di usare quel font per tradurre l’aspetto del testo html a cui si rifersce la proprietà. Siccome i vari sistemi operativi hanno font installati di base diversi, noi, come designers, eravamo obbligati ad usare quelli più comuni che erano installati sulla maggior parte dei computer (ricordatevi che il browser cerca il font sulla macchina del visitatore).
Questo è anche il motivo per cui definiamo “stack” (gruppi) di fonts in font-family e non solo il nostro preferito: cerchiamo di assicurarci che se il primo font non è disponibile sul computer del visitatore venga allora caricato il prossimo.

Questo articolo di David Rodriguez spiega in dettaglio i web-safe fonts e come usarli. Se volete migliorare i vostri stacks e provare nuove soluzioni sempre nei limiti dei web-safe fonts vi consiglio di scaricare il file pdf da Unit Interactive, è diventato il mio riferimento da quando l’ho letto.

Ovviamente potete obbiettare che avete visto su molti siti fonts diversi dai soliti Verdana o Georgia (per citarne un paio). Questo perchè esistono altre tecniche come sIFR3, cufòn e la sostituzione con immagini, per non usare i font comuni, ma implicano l’uso di flash, javascript o immagini con conseguenti svantaggi. Perciò di solito sono usati solo per i titoli.
Craig_Ward_badtypographyiseverywhere.jpg

i. alternative

Oggi qualcosa sembra stia cambiando e tutti gli amanti della tipografia del mondo si stanno eccitando (ho esagerato?).
Sto parlando di @font-face, la nuova regola CSS che permette di includere (“embed” se il termine vi ricorda qualcosa) font nel vostro sito.
Vi darò un piccolo tutorial su come usarlo efficacemente a breve, ma prima vediamo com’è la situazione odierna rispetto alla disponibilità dei font.

ii. webfonts proposals

ILoveTypography ha un bell’articolo completo sulla questione che cercherò di riassumere ora.
Microsoft nel 1997 ha sviluppato il suo formato Embeddable Open Type (.eot) di font che era poi supportato da IE4. Inviarono la proposta di ammissione al W3C, ma fu rifiutata prevalentemente per ragioni di sicurezza.

Ora Tal Leming e Erik Van Blokland propongono un nuovo formato, .webfont, che consisterebbe in 2 file: uno sarebbe il font grezzo (es. TTF o OTF) e uno un info.xml che conterrebbe i permessi per usare quel font. Il browser leggerebbe il file .xml e deciderebbe se caricare o meno il font.
Potete leggere meglio come funziona su ChezPorchez.

David Berlow di Font Bureau propone invece “permission teble of Opentype”, un sistema per inserire i permessi d’utilizzo direttamente nel font (rimandendo dunque con un solo file) e usando un file già pronto ad essere incluso perchè .otf
Una critica mossa a questi metodi è che sarebbe facile modificare i file xml per aggiungere i propri dati ai permessi d’utilizzo anche senza avere una licenza.
Nel frattempo Ascender ha lavorato per evolvere il formato EOT di Microsoft in uno di uso più facile: EOT Lite.

Tra le notizie dell’ultimo momento, gli sforzi di Leming e Blokland si sono uniti a quelli di Jonathan Kew (Microsoft Corporation) per dar vita al formato WOFF , un unicofont file compresso contente anche meta-datas e private-use data. Ecco un estratto dal testo della bozza originale:

The WOFF format is directly based on the table-based sfnt structure used in TrueType[1], OpenType[2] and Open Font Format[3] fonts, which are collectively referred to as sfnt-based fonts. A WOFF font file is simply a repackaged version of a sfnt-based font in compressed form. The format also allows font metadata and private-use data to be included separately from the font data. WOFF encoding tools convert an existing sfnt-based font into a WOFF formatted file, and user agents restore the original sfnt-based font data for use with a webpage.

A quanto pare non ci sono ancora programmi per convertire i file, ma è comunque un passo avanti verso una soluzione. Il documento ufficiale è qui.

Ad ogni modo il problema di tutte queste soluzioni è che devono essere accettate dal W3C per poter essere adottate in futuro, ma il W3C inizierà a lavorare su una proposta solo sapendo che è supportata dalla maggioranza delle typefoundries e non c’è una vera e propria industria “type industry” — almeno rappresentata ufficialmente — quindi le decisioni sono piusstosto individuali e rallentano le cose. Inoltre poi il formato dovrebbe essere supportato dai browsers.

iii. soluzioni dei distributori

Qualcuno sta già supportando @font-face vendendo font con licenze che permettono l’inclusione nei siti.
Uno è Typekit che affittano i font invece di vendere completamente la licenza.
Scegli su che dominio la userai e paghi mensilmente. In cambio ottieni un codice javascript che include il font ospitato su un server.
Typotheque sta facendo una cosa molto simile, vendendo licenze (per dominio e non mensilmente sembrerebbe) e ospitando il font su un cloud server. Invece del javascript mandano un codice css da aggiungere al proprio sito. Spiegano che quando si scegli un font bisogna specificare la lingua così da aiutarli ad elimenare i caratteri inutili e riducendo il peso del file per assicurare caricamenti più veloci.

Andy Clark su For a Beautiful Web si lamenta del fatto che Typekit offre un’ottima soluzione ma lascia un problema ai designers: se abbiamo un licenza solo per includere i font online, come facciamo ad usarli per i progetti offline da mostrare ai clienti?

chunk-11.jpg

Ovviamente esistono anche openfonts Su Webfont.info e Font Squirrel potete trovare lunghe liste di font disponibili per l’embedding. In particolare su questo blog uso un paio di fonts forniti da The League Of Moveable Type e Cape Arcona, potete vedere quali nella mia “about page”.
Anche Jos Buivenga offre una bella selezione di fonts.

Posso usare qualsiasi font? No, siete ovviamente limitati dalla End User Licensing Agreement (EULA), ovvero i termini della licenza, quindi scegliete attentamente quali font usate.
Ad esempio non potete caricare online un font tra quelli che avete nel vostro sistema operativo perchè solitamente hanno una licenza che ne regola l’uso solo su applicazioni per desktop. Caricandoli violereste la licenza esponendo il font alla possibilità di essere scaricato da chiunque perchè è su un server pubblico. Sciegliete sempre font che sapete avere una licenza apposta per l’inclusione. Leggete sempre attentamente l’EULA anche se avete acquistato il font perchè in realtà pagate per un permesso d’utilizzo, ma non lo possiedete realmente. Su Font Feed spiegano molto bene come leggere l’EULA con l’esempio della nuova versione pubblicata da Fontfont.
Se trovate un font gratuito e non siete sicuri riguardo alla licenza, ma volete includerlo probabilmente è una buona idea aggiungere nel foglio di stile un commento dove chiedere il permesso vicino alla regola @font-face. Almeno questo è quello che suggerisconono su Hack.Mozilla.

@FONT-FACE: COME USARLO

Se avete letto la prima parte dell’articolo potreste pensare che la situazione è ancora piuttosto confusa e non useremo questo metodo a breve.
No, in realtà tutto è pronto e potete finalmente usare la regola @font-face per il vostro testo.
Ci sono alcune limitazioni sulla disponibilità dei font, ma ne abbiamo già una grande varietà a nostra disposizione, e molti browser di ultima generazione la supportano (Opera 10, Firefox 3.5, IE dal 4, Webkit-based/Safari 3.1). Potete trovare una lista dettagliata su webfont.info.

Dunque ecco come @font-face funziona: è una regola per il vostro foglio di stile che vi permette di mettere un link ad un font (un file .ttf .otf .eot) nello stesso modo in cui ora includete codici o immagini. Il file del font è ospitato su un serve e @font-face da le indicazioni per caricarlo e tradurre il testo html dove specificato.

/* Graublau Sans Web (www.fonts.info) */

@font-face {
  font-family: Graublau Sans Web;
  src: url(GraublauWeb.otf) format("opentype");
}

body {
  font-family: Graublau Sans Web, Lucida Grande, sans-serif;
}

Ha 3 declarations:
font-family: che diventa il riferimento da usare poi nei vostri stacks. è arbitrario, potete scegliere qualsiasi nome vogliate a patto di usare lo stesso nella proprietà font-family dell’elemento html.
src: qui è dove inserite il percorso al file. Se pensate che il visitatore possa già avere quel font sul proprio computer allora potete usare local(nomedelfont) e poi aggiungere magari un percorso alternativo per sicurezza.
format: Serve a specificare che estensione di file state usando ( TrueType; OpenType;).
font-style: il valore standard è “normal” ma potete scegliere tra “italic” e “bold”. In realtà se il font lo permette potete specificare fino a 9 pesi diversi.

Se avete bisogno di sapere il nome esatto del file per scrivere il percorso corretto potete, su MacOSX e Linux cliccare su “font info” tra le opzioni del file, mentre su Windows vi servirà la font proprietary extention Comunque generalmente il nome del font si ottiene unendo la familia allo stile (es: “Helvetica Bold”).

Ricapitolando: guardate questo esempio preso da HackMozilla

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"), 
       local("HelveticaNeue-Bold"), 
       url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
 
body { font-family: MyHelvetica, sans-serif; }

Vedete che ogni @font-face ha le tre declarations. Con font-family si assegna il nome al font, con src si garantisce più di un percorso per trovare il file prima provando sul computer del visitatore e poi sul webserver; con format si specifica se è un file TruType o Opentype.
Subito dopo vedete un esempio di un elemento, in questo caso body, a cui viene applicato il font nel modo solito che conosciamo, basta aggiungere il nome che avevamo scelto nello stack di font-family.

evolve8_i-typography

ii. aiutare IE

Internet Explorer, come al solito, ha le proprie regole. Questa volta ad onor del vero dobbiamo ammettere che Microsoft era arrivata per prima con il proprio formato Embeddable Open Type (.eot) per l’inclusione e supportano @font-face già dalla versione 4 di IE.
Sfortunatamente da allora la situazione non s’è evoluta di molto e sono gli unici ad usare quel formato. In più IE non riconosce il descriptor format e ignora qualsiasi regola @font-face che lo contiene.

Questo significa che per assicurarsi una compatibilità su tutti i browsers dovrete sempre aggiungere un @font-face apporta per IE prima degli altri, con un link ad un file .eot evitando format.

/* Font definition for Internet Explorer */
/*         (*must* be first)             */

@font-face {
  font-family: chunkie;
  src: url(type/Chunk/CHUNKFI0.eot) /* can't use format() */;
}

E dove pensate di trovare i font con estensione .eot? Da nessuna parte, sorridete! Dovete convertire i vostri .ttf con il Microsoft WEFT tool (vi spiego come tra poco): Questo programma è disponibile solo per Windows, ma qui potete trovare una versione opensource per altri sistemi operativi.
Comunque queste due applicazioni vi aiutano solo a convertire i file TrueType (.ttf), ma per quanto riguarda i gli OpenType (.otf) ? Dovrete seguire le istruzioni di J.Malcolm in questo commento.

Come avevo detto poco fa, ecco come usare il WEFT per convertire i .ttf in .eot .Jon Tangerine qui spiega benissimo il suo metodo, probabilmente il migliore.

iii. ottimizzando per IE

Bene, avreste tutti gli elementi per usare @font-face, ma dovreste sempre usare due selettori per supportare IE a non è la soluzione più bella del mondo. Inoltre, anche se non siete preoccupati dell’estetica del codice, magari lo siete delle prestazioni del sito.
Andrea Giammarchi Questa settimana ha scritto un articolo dove faceva notare che IE quando legge il vostro selettore @font-face cerca di caricare anche il file.ttf sebbene non lo legga e semplicemente conclude l’operazione con un errore 404. Non vene accorgereste senza andare a controllare il log del server ma è comunque lavoro inutile per il vostro server.
Paul Irish arriva sul suo cavallo bianco per salvarci con una semplice soluzione: nella regola @font-face potete scrivere un descriptor src col percorso al file .eot per IE e poi una fonte local che costringe il browser di Microsoft ad ignorare i seguenti src ad un file .ttf, quelli per tutti gli altri browsers.Semplice, liscio, bellissimo.
Potete leggere tutto il processo di testing sul blog di Scott Kilmer Qui invece un esempio del codice preso dalla pagina di Giammarchi per capire meglio:

@font-face {
    // define the font name to use later as font-family
    font-family: "uni05_53";
    // define the font for IE which totally ignores local() directive
    src: url(../font/uni05/uni05_53.eot);
    // use local to let IE jump this line and
    // redefine the src for this font in order to let
    // other clever browser download *only* this font rather than 2
    src: local("uni05_53"), url(../font/uni05/uni05_53.ttf) format("truetype");
}

Conclusione:

Questo è tutto, abbiamo visto qual’era la situazione della tipografia nel web design fino a ieri, quali sono le proposte per domani e come usare @font-face oggi.
Avete tutti gli strumenti che vi servono e anche se sembra complicato leggendo un articolo così lungo, vi assicuro che è molto semplice dopo aver provato.
Quindi è il momento per voi di contribuire a creare un Web migliore con bellissimi typefaces!

Se qualcosa non è chiaro chiedetemi pure qualsiasi cosa nei commenti o date un’occhiata alle fonti che ho elencato più sotto.

You can leave a response, or trackback from your own site.


Tags & Category



Related articles


Condividi

  • digg
  • SFacebook
  • Twitter
  • technocrati
  • stumble
  • delicious

Commenti   16rss

    1. Comment by MrSlash

      November 10, 2009 @ 6:10 am


      Articolo veramente interessante. Illuminante direi. Scende nei dettagli proprio quanto serve. Ho provato a seguirlo passo passo, ma c’è qualcosa che non mi funziona…non capisco in locale e remoto, non si degna di caricarmi il font con ne con firefox 3.5.5, ne con Safari e Co.

    2. Comment by MrSlash

      November 10, 2009 @ 12:25 pm


      Non ci sono restrizioni di copyright sui font da visualizzare con l’utilizzo di questo metodo @font-face?

    3. Comment by admin

      November 14, 2009 @ 8:59 pm


      Ciao Slash, scusa per la risposta in ritardo.
      dunque, sì ci sono ovviamente restrizioni riguardo il copyright, ho cercato di spiegarlo nell’articolo ma è difficile essere chiari perchè la situazione è complessa ma soprattutto acerba per ora, essendo @fontface una regola nuova.

      alcune distributori di fonts, quelli che vendono i fonts online, offrono delle licenze apposta per l’embedding tramite @fontface e generalmente questo significa che devi specificare il sito in cui lo userai e sarai limitato a quello.
      Se invece decidi di usare un font gratuito che hai trovato online guarda ha un’eula, ovvero una licenza d’uso, e se in essa si concede l’incorporamento nei siti. cmq in generale i font distribuiti gratuitamente non hanno restrizioni. Nel post ho segnalato alcuni link a typefoundries che distribuiscono fonts gratuiti proprio per l’uso online. se guardi nella sezione "about" del logo ci sono anche i link ai font che uso io stesso sul blog.

      come regola io ti consiglio di usare sempre solo fonts per i quali sei sicuro sia permesso l’uso o dei quali hai acquistato una licenza. e come ho spiegato nell’articolo stai attento perchè quando acquisti un font l’hai solo noleggiato e puoi usarlo solo come descritto nell’eula, non puoi farci quello che ti pare. anche se costano un sacco di soldi purtroppo.

      veniamo al tuo problema tecnico. non sono sicuro del perchè non abbia funzionato, ti assicuro che sia su safari che da firefox 3.5 in poi @fontface funziona. se mi mostri cos’hai fatto in dettaglio magari troviamo la soluzione.
      per quanto riguarda la differenza locale e remoto: con locale intendo il tuo computer, mentre remoto vuol dire ospitato su un server (il tuo in questo caso).
      Se usi "local()" mettendo il nome del font nelle parentesi, il font verrà usato/visualizzato solo da chi ha quel font installato sul suo computer. un po’ come funziona di solito in css. se invece usi "url()" dove tra parentesi metti il percorso al font, il font lo devi caricare sul server dove ospiti il tuo sito e sfrutti la potenzialità di @fontface, ovvero poter usare qualsiasi font tu abbia messo su un server senza che chi visita il tuo sito debba averlo installato sul proprio computer.

      forse ti ha confuso l’uso di "local()" per ingannare IE ma è solo una scappatoia pulita perchè @fontface funzioni bene anche su IE senza mandare requests inutili al server.

      spero d’esserti stato d’aiuto. se hai bisogno chiedi ancora e sta volta cercherò di risponderti prima :)

    4. Pingback by aggiungere nuovi font su altervista - AlterVista | Spazio web gratis, hosting free php mysql

      December 7, 2009 @ 3:59 pm


      [...] [...]

    5. Comment by Giacomo

      January 14, 2010 @ 9:51 pm


      Sto iniziando a muovere i primi passi nel mondo dei CSS ed ho trovato questo articolo molto molto interessante!

      Purtroppo applicando il @font-face ho avuto un problema con un font che ho scaricato (è di libero utilizzo http://www.windowfonts.com/fonts/ffx-simple-thin.html).
      Nel creare un sito web ho utilizzato il seguente codice :
      @font-face{
      font-family: europa;
      src: url(ffx-simple-thin.ttf) format("truetype") ;

      }

      .europa{ font-family: europa; }

      Ora,premesso che ho provato a cambiare font(sempre scaricati del sito) e tipo di format (e con altri caratteri funzionava), ho inserito nel tag body il seguente codice :
      <span class="europa ">testo prova</span> ma non mi cambia il tipo di font!:-(

      Ripeto: ho provato ad usare altri font o a cambiare il format ma SOLO con questo non mi funziona e non riesco proprio a capire il motivo.
      Spero di essere stato chiaro nella spiegazione :-)

      Grazie.
      Giacomo.

    6. Comment by ale

      March 2, 2010 @ 10:17 am


      Articolo molto interessante. Ho fatto una prova ma firefox visualizza un alert per ogni font usata e l’utente può decidere se accettare oppure no. C’è un modo per evitare questo problema? grazie

    7. Comment by Paolo

      May 14, 2010 @ 4:31 pm


      Ciao, innanzi tutto complimenti per il sito, mille di questi articli!.
      Io sto avendo problemi con mozzilla per mac (3.6). la regola mi funziona sul pc, su safari, ma non su mozzilla per mac. Hai qualche idea? le ho provate tutte!

    8. Comment by Paolo

      May 15, 2010 @ 3:35 am


      Innanzi tutto complimenti per il sito. Sono anche io un appassionato di Tipografia e web typography e il tuo lavoro parte proprio bene.Il mio problema: ho implementato @font-face su un sito, ma mozilla per mac mi da problemi: sapresti dirmi se hai riscontrato cose simili? Mi funziona su tutto tranne su Mozilla (3.6) sul mac. (devo dire che mi da lo stesso problema su un altro sito che utilizza typekit… Sempre lui.

    9. Comment by Massimo

      July 19, 2010 @ 10:24 am


      grazie mille per l’articolo, mi è stato molto utile :)

      funziona tutto egregiamente ;)

    10. Comment by Fabrizio

      July 28, 2010 @ 6:19 am


      Finalmente un’articolo che fa chiarezza sulla situazione. Grazie davvero!

    11. Comment by tatac

      December 1, 2010 @ 5:18 am


      Semplice e completo.
      Io genero il codice con http://www.fontsquirrel.com/fontface/generator testato su più browser con ottimi risultati.

      Odiavo cufon e sirf

    12. Pingback by @font-face - AlterVista | Spazio web gratis, hosting free php mysql

      April 21, 2011 @ 6:41 pm


      [...] [...]

    13. Comment by briareoz

      December 3, 2011 @ 6:52 pm


      Ottimo articolo e… sempre attuale!
      Grazie tatac per il link.

    14. Comment by Gionata

      May 24, 2012 @ 2:46 pm


      Innanzi tutto complimenti per l’articolo. Iniziavo a perdere le speranze di capirci qualcosa.
      Adesso però vorrei chiederti che cosa faresti tu se volessi mettere un "Helvetica Neue LT Std 57 Condensed" su un sito, quale sarebbe la miglior procedura, dove acquisteresti i diritti e in che modalità, cioè acquisteresti solo licenza e useresti @font-face, oppure useresti un servizio completo con pagamento per utilizzo mensile tipo Typekit?

      Inoltre non sono riuscito a capire se i "Webfont Services" hanno tutti i font a disposizione, riprendendo l’esempio di prima, io non sono riuscito a trovarci il font "Helvetica Neue LT Std 57 Condensed".

      Grazie in anticipo.

    15. Comment by francesca

      June 27, 2013 @ 10:52 am


      complimenti per la grafica del blog…è stupenda

    16. Comment by admin

      June 27, 2013 @ 2:44 pm


      Ti ringrazio. Ormai avrebbe bisogno di un restyling che sto preparando insieme a nuovi articoli, ma manterrò la medesima impronta visiva.


top