Raccolta di font open-source per @font-face

Una collezione di link utili da cui scaricare font liberamente utilizzabili con @font-face.

Utilizzare font personalizzati sui propri siti web ormai non è più un’utopia: con il supporto ormai diffuso della proprietà @font-face è possibile in pochi passi personalizzare un progetto senza dover ricorrere ai classici Arial e Georgia.

Ricordando che è comunque fondamentale preservare la leggibilità, uno dei punti critici è l’utilizzo di font protetti da copyright: non è infatti possibile pubblicarli su una pagina web se sono tutelati dal diritto d’autore. Per questo motivo le soluzioni possibili sono utilizzare servizi esterni come Typekit, oppure scegliere font open-source che non presentano alcun problema legale.

Se optate per la seconda ipotesi, questa raccolta di web font liberamente utilizzabili potrebbe tornarvi utile:

  • The league of Moveable Type: una collezione appena nata di font open-source disegnati in maniera specifica per l’utilizzo su web con @font-face.
  • Font Squirrel: una delle migliori raccolte attualmente disponibili. Sul sito sono presenti anche diversi strumenti utili per includere font nei propri progetti.
  • Google Fonts: Google mette a disposizione una buona raccolta di font, che è possibile includere sui propri siti direttamente dai server di Mountain View. Sono presenti comunque anche i link per il download.
  • Webfonts Wiki: offre un elenco abbastanza dettagliato di font utilizzabili con vari tipi di licenze come OpenFont, GNU, CC oppure open-source.
  • Fonthead: una discreta collezione di font gratuiti ed a pagamento.
  • Ten by twenty: tutti i font gratuiti di questo sito sono espressamente utilizzabili con @font-face; quelli a pagamento no.
  • Dafont: una delle più ampie collezioni di font gratuiti. Potete utilizzarli con @font-face, ma fate sempre attenzione ad eventuali clausole prima del download

Come utilizzare @font-face?

Avete trovato il font che fa per voi ma non sapete come includerlo sul vostro sito? Se la semplice guida che ho pubblicato vi risulta ancora troppo complessa, troverete fantastico il @font-face generator di Font Squirrel: dovrete solo caricare il font desiderato ed avrete immediatamente un kit pronto all’uso con tutti i file necessari.

Personalizzare i font con Typekit

Poche righe di JavaScript sono sufficienti per personalizzare il proprio sito usando font alternativi.

Da diverso tempo sto sperimentando l’uso di Typekit, un servizio che permette di utilizzare font diversi dai soliti noti (Arial, Verdana, Georgia…) in modo compatibile con tutti i principali browser. Il funzionamento è semplice e si basa su font-face e JavaScript, eliminando il problema relativo ai copyright dei font che sono interamente ospitati sui server di Typekit.

I risultati del test

Sono molto soddisfatto dei risultati ottenuti sul mio blog personale, dove sto effettuando le prove. La configurazione è semplice, e l’account trial gratuito permette di fare test senza problemi, mettendo a disposizione più di un centinaio di font (sono oltre 400 negli account a pagamento). La libreria disponibile tra l’altro cresce nel tempo, perché ne vengono progressivamente aggiunti sempre di nuovi.

Quali sono i possibili svantaggi da considerare? Sicuramente il peso della pagina, che a seconda del font scelto cambia notevolmente. Utilizzando il font Droid Serif, nelle sue forme Regular e Italic, ho una pagina che pesa ben 79kb in più del normale. Le cose potrebbero cambiare senza usare il corsivo, ma è necessario comunque fare attenzione a dettagli come questo. Il peso dei font aggiuntivi è comunque sempre visibile nel pannello di amministrazione di Typekit, non è quindi un dettaglio nascosto, da calcolare autonomamente.

Prima di scegliere un font inoltre è bene verificarne l’aspetto sui vari browser: non sempre il rendering è ottimale, soprattutto su Internet Explorer.

Questi però non sono problemi relativi a Typekit, ma fattori da considerare quando si usano font alternativi. L’unico limite del servizio, con l’account trial, è l’inserimento di un piccolo badge in basso a destra sul sito, e la banda mensile di 5Gb per i font.

Scegliere Typekit o usare i CSS?

L’alternativa CSS-only è sempre praticabile: ne avevo parlato nel 2008 quando solo Safari supportava certe proprietà e adesso potrebbe essere la soluzione ideale. Il problema però è l’esistenza di un copyright su quasi tutti i font, spesso anche quelli gratuiti, che non sempre possono essere utilizzati liberamente.

Un altro limite della soluzione autonoma è dato dalle solite differenze tra browser. Firefox supporta Web Open Font Format e TrueType, Safari e Chrome supportano solo TrueType, Explorer supporta EOT, mentre Safari Mobile (iPhone e iPad) usano SVG. Un grande caos, che obbliga lo sviluppatore a includere un font in tutti questi formati per avere risultati coerenti.

Per questo motivo soluzioni come Typekit sono l’ideale: certo, c’è da considerare una minima spesa aggiuntiva se non si vuole usare l’account gratuito con i relativi limiti, ma i vantaggi esistono.

Ci sono anche altre soluzioni alternative, come Typotheque (che concede licenze anche per la stampa) e Kernest, ma non le ho provate personalmente. Ve le segnalo se siete interessati a sperimentare, in attesa di altri servizi come Fontdeck.

CSS3 Web Fonts: test pratico

Istruzioni d’uso per i Web Fonts, nuovo modulo dei CSS3.

Con i CSS2 è possibile avere un buon controllo sui font utilizzati in una pagina web. Basta dichiarare un elenco di font, e se il primo non è disponibile il browser cercherà il secondo, fino all’esaurimento dei font dichiarati.

Le cose però sono state sviluppate ulteriormente con i CSS3, che vedono l’introduzione dei Web Fonts.

Cosa sono i Web Fonts? Sono un miglioramento che consente tramite CSS di far scaricare automaticamente all’utente dei font non installati sul proprio sistema operativo. In questo modo le pagine saranno visualizzate esattamente come pensato dal graphic designer, senza bisogno di ricorrere a tecniche di image replacement.

In realtà il documento del W3C che parla di Web Fonts è stato creato il 2 Agosto 2002, ma come noto dalla dichiarazione di uno standard all’utilizzo pratico il cammino è lungo. Ne parlo ora perchè Safari 3.1 è il primo browser a supportarli, consentendo di iniziare ad usare questa tecnica.

Niente infatti vieta di utilizzare i Web Fonts, che saranno trascurati dai browser che non li supportano.

Per usarli, è sufficiente inserire all’interno del CSS una dichiarazione di questo tipo, indicando il percorso per scaricare il font:

@font-face {
font-family: 'Bimini';
src: url('bimini.ttf');
}

A questo punto sarà possibile usare il font dichiarato (Bimini) senza preoccuparsi della sua presenza sul computer dei visitatori:

h1 { font-family: Bimini, Arial, sans-serif; }

Da notare che se si vuole usare il nuovo font in grassetto, va dichiarata anche questa variante:

@font-face {
font-family: 'Bimini';
font-weight: bold;
src: url('bimini.ttf');
}

Stesso discorso per il corsivo e le altre combinazioni a disposizione.

Se avete Safari 3.1 e volete testare i Web Fonts, ho preparato una pagina demo. Utile anche per chi vuole vedere il CSS in pratica.

A questo punto potete utilizzarli liberamente, al momento solo chi usa Safari avrà un’esperienza migliore.

Il mio consiglio però è di farlo in maniera responsabile. Ricordate che dovreste usare solo font gratuiti con licenza di libera distribuzione, e soprattutto che verranno scaricati dal browser dei visitatori. Considerando che esistono font dal peso superiore ai 100kb, valutate con attenzione ogni cosa prima di usare i Web Fonts.