Come usare @font face e Google font per i nostri progetti

Ormai e’ noto a tutti, il web 2.0 (quasi 3.0 ormai!) e’ segnato dall’uso dei font per personalizzare al massimo ogni progetto web. Quali sono le tecniche usate per implementarli? Quali vantaggi e novità hanno introdotto i Google fonts? sveliamo l’arcano in questo articolo.

Visita Google Web Fonts

Gli Albori: Arial e Tahoma

Qualche anno fa, erano questi i font più usati per il web design. Indubbiamente sono tra i font più leggibili e “classici”, ma con l’introduzione di tutta una serie di moderne tecnologie (come jQuery) e animazioni sempre più complesse, si e’ sentita la necessità di poter personalizzare anche i font a seconda delle esigenze stilistiche personali. Il problema però sembrava insormontabile: come fare a rendere i nostri progetti “visibili” a tutti, anche senza il font salvato nel computer?

La risposta fu Google Fonts ( e le nuove tecniche CUFON e Font Face). Con Google fonts, il set di caratteri e’ online e viene caricato dinamicamente durante il normale load della pagina web. Con CUFON e Font Face (CSS3), invece il set di caratteri viene rispettivamente generato in un file javascript nel primo caso,  ed aggiunto tramite CSS nel secondo. In questi due casi bisogna inoltre possedere “fisicamente” la licenza e relativo file di carateri .ttf o .otf.

Quale usare? Quali sono i vantaggi di ciascun metodo?

Bella domanda, se avete un progetto “corposo”, ovvero già pesante durante il caricamento, e volete velocizzare il vostro sito internet, di sicuro dovete ricorrere al Google Fonts. Di fatto si ricorre a Google come CDN per “dividere” le richieste HTTP del sito e velocizzare il caricamento generale dello stesso. Se non sapete cosa sia un CDN leggete questo articolo. I font vengono così caricati dai server super-veloci di Google ed aggiunte automaticamente al nostro sito. Di contro i font a disposizione dalla Font directory di Google sono in continua crescita, ma pur sempre LIMITATI. Se volete usare ad esempio un font particolare, non presente nella directory, per ora dovete ricorrere ad uno degli altri due metodi.

La “terra di mezzo” : CUFON

Pochi mesi fa, prima dell’uscita dei nuovi web browser (compatibili con i CSS3), l’unica alternativa valida ai Google fonts era usare la tecnologia CUFON. Di fatto per usare CUFON serve avere il set di caratteri .ttf o .otf e, tramite l’upload nel sito ufficiale, veniva elaborato un file javascript da aggiungere nell’head del sito internet. A questo punto, sempre tramite javascript, si impostava quali “selettori” sostituire (h1,h2,testo_footer etc). Tuttavia, in alcuni casi, la sostituzione (sopratutto nei menu) rendeva “non cliccabile” il testo, sopratutto su IE. Oltre a questo risulta comunque un procedimento abbastanza “macchinoso” e lento durante i caricamenti. Il procedimento di “replace” deve avvenire ovviamente nell’header in questo modo:

<script src="../js/cufon.js" type="text/javascript"></script>
<script src="../fonts/tuo-font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('*'); //applico a tutto il testo (Sconsigliato)
Cufon.replace('h1,h2'); //applico il font ai tag h1 e h2
</script>

Ad oggi, con le altre tecniche molto più veloci e stabili, cufon risulta una scelta che personalmente vi sconsiglio caldamente. Sia per i bug sopra descritti, ma anche come velocità e affidabilità, risulta la tecnica peggiore.

La rivoluzione: tecnica @Font-Face dei CSS3 ecco come usarla

Con l’introduzione dei CSS3 una delle novità piu’ interessanti analizzate dai developer e’ stata proprio la tecnica @font-face che permette, a partire da un set di caratteri .ttf o .otf con regolare licenza, di aggiungere i font tramite CSS, in modo facile e veloce, proprio come google fonts. La differenza rispetto al servizio di bigG e’ la svariata quantità di font componibili, praticamente infinita. Per farvi un’idea potete visitare FontSquirrel, uno dei maggiori siti di font mondiali, che permette tra l’altro, di poter creare il proprio set grazie al font-face generator. Se abbiamo un font salvato nel nostro pc possiamo pertanto creare facilmente il nostro set di caratteri da usare  nei nostri progetti.

Ecco come aggiungere il set di caratteri con la tecnica @font-face:

Nell’html strutturiamo un esempio in questo modo:

<h1>Tuo titolo di heading</h1>

Nei css, scarichiamo il pacchetto font-face, e salviamo i font nella root del sito (o tema). Richiamiamo poi nel css con la regola font-face in questo modo:

@font-face {
    font-family: 'font mio';
    src: url('nome-font.eot');
    src: url('nome-font.eot?#iefix') format('embedded-opentype'),
         url('nome-font.woff') format('woff'),
         url('nome-font.ttf') format('truetype'),
         url('nome-font.svg#nome-font') format('svg');
    font-weight: normal;
    font-style: normal;

}

Sempre nei css, selezioniamo dove vogliamo sia “cambiato” il font in questo modo:

h1{font-family:'font mio creato', Arial, sans-serif;}

-VANTAGGI:

-Compatibilità con tutti i dispositivi (anche mobili)

-Set di font praticamente infinito e creabile su misura

– SVANTAGGI

– Tempi di caricamento un pò più lunghi rispetto ai google fonts.

– Per i novizi risulta essere una tecnica forse più complicata rispetto ai google fonts

Vuoi velocità nel caricamento? usa i Google Web Fonts!

Il titolo non e’ messo a caso: se desiderate la massima velocità di caricamento dovete usare i Google Fonts, proprio perchè, anche concettualmente, dividere il caricamento con i server-ninja di Google e’ un bel vantaggio.

Ecco come aggiungere un font con Google:

Andiamo sul sito e scegliamo un font dalla lista. A questo punto copiamo il link dentro l’head del nostro sito, e nel css impostiamo il font-family relativo.

Es: Yanone Kaffeesatz

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'> //dentro l'head

h1 { font-family: 'Yanone Kaffeesatz', arial, serif; } //associo il font nei css

–VANTAGGI

– Nel caso di design complessi risulta la soluzione preferibile

-Facilità di utilizzo

– SVANTAGGI

– (per ora) Font limitati

Conclusioni : tiriamo le somme

Abbiamo analizzato i pro e i contro di ciascuna tecnica, ma quale devo usare alla fine? Di sicuro vi sconsiglio il cufòn, ma tra font-face e Google font? quale scegliere? La mia risposta e’ se il font e’ presente nella google font directory usate questo metodo, altrimenti sbizzarritevi con font-face. Altresì nel caso di design complessi e pesanti, per ora, Google sembra la soluzione più indicata.

Voi cosa preferite usare nei vostri progetti?