Che gli stili tipografici sul Web (e non) ormai siano popolati da font “non-standard” è un dato di fatto.
Ciò che invece non lo è affatto è come riprodurli correttamente su qualsiasi pagina web e browser.

In questo post prenderò in esame i 3 metodi più comuni per visualizzare font non-standard sul Web, elencandone Pro e Contro.

Type Face e Font, che differenza c’è?

Nella pratica comune, i “font” per noi sono qualsiasi stile di carattere… Verdana è un font, Helvetica è un font.. ecc.
Nella realtà (tipografica, grafica ma non solo) questi appena elencati non si indicano assolutamente come “font”, bensì come Type Face.
Helvetica è un typeface, mentre Helvetica Bold 8-punti è uno dei font possibili per questo typeface.
La differenza adesso è più chiara: i typefaces sono famiglie stilistiche di caratteri e glifi – simboli -, al cui interno sono presenti varianti stilistiche possibili, i font appunto (Bold – grassetto -, Italic – corsivo ecc.), e relative misure (che in tipografia si misurano in punti – pt).
Esistono poi le macro famiglie, che racchiudono per stile moltissimi typefaces:

• serif (es. Times)
• sans-serif (es. Arial o Helvetica)
• cursive (es. Zapf-Chancery)
• fantasy (es. Western)
• monospace (es. Courier)

Ognuna di queste famiglie avrà uno o più caratteri assolutamente distintivi, nei quali si riconosceranno molti typefaces.
Un breve esempio è la differenza tra serif e sans-serif: il carattere distintivo di tutti i typefaces serif sarà una stanghetta finale nei gami delle lettere (es. Times, Museo) mentre nei sans-serif i gambi dei caratteri saranno troncati, non avranno prolungamenti di nessun tipo (es. Arial, Lucida Grande).

Detto tutto ciò, per pura praticità, ma sperando che abbiate capito la differenza che in alcuni casi è fondamentale sapere, userò indistintamente “font” per indicare sia typefaces che font relativi, anche perchè in questa sede la distinzione in sé non conta più di tanto.

Il metodo sbagliato e quello standard

Ho visto siti con regole, nei loro CSS, del tipo:

font-family: Garamond, serif;

Questo è il perfetto esempio di ciò che NON va fatto in nessun caso.
In pratica state dicendo alla pagina di usare il font Garamond, assumendo come certo, che l’utente – qualsiasi utente – l’abbia installato sul proprio computer.
Il caso vuole che la stragrande maggioranza degli utenti NON lo avrà installato e nemmeno lo farà, visto che per averlo bisogna pagare una licenza e sicuramente nemmeno se ne accorgeranno.
Tutto ciò che gli utenti vedranno sarà il font fall-back, anzi nemmeno quello perchè nella regola di esempio, non è stato nemmeno previsto (che sarebbe stato meglio quantomeno):

font-family: Garamond, "Times New Roman", serif;

In questo caso, se il browser non trova Garamond installato, andrà a cercare Times New Roman (da notare le virgolette che si mettono SEMPRE per i font con spazi nel nome).
Se non fosse stato specificato nessun fall-back, il browser prenderà il font predefinito di sistema della famiglia “serif”, che cambierà a seconda che sia Windows o Mac.
Altre famiglie di fall-back, nel caso nessuno dei font fosse trovato, possono essere quelle elencate nell’intro.

Metodo 1 – sIFR

Dopo aver brevemente visto come impostare un font diverso da quello di sistema, possiamo anche dimenticarcelo.
Come già detto, nella maggior parte dei casi gli utenti avranno solo o quasi, i font pre-installati del sistema ed indicarne uno particolare nei CSS sarà praticamente inutile.
Il primo metodo, e fino a qualche tempo fa il più utilizzato, è sIFR, che sta per “Scalable Inman Flash Replacement”.
sIFR avrà bisogno inizialmente della versione swf del font che volete utilizzare, quindi dopo aver convertito qualsiasi True Type Font (.ttf) in file SWF, basterà allegarlo alla vostra pagina. Successivamente caricherete tutto lo script nella pagina web della quale vogliamo cambiare i font, e dopo averlo impostato a dovere, utilizzerà Javascript per trasformare il testo in Flash, ed il risultato sarà quel font non-standard che volevamo.
Solitamente i testi che si cambiano sono gli Headings (h1,h2,h3 ecc), ma decisamente non i paragrafi o altre parti del sito, per i motivi sotto riportati nei Contro.
Ricordo che dovete avere tutte le licenze del caso, per utilizzare il font in questione (acquisto di una licenza commerciale per siti a scopo di lucro, mentre per uso personale potrebbe essere gratuito, meglio controllare comunque.)

Pro
– Si ottiene il risultato sperato.
– I motori di ricerca possono comunque leggere il testo, visto che in ogni caso è presente in forma testuale nel documento non elaborato.

Contro
– L’utente deve avere SIA flash installato SIA i javascript abilitati. Nel caso uno dei due non siano funzionanti perfettamente, sIFR non funzionerà e utilizzerà semplicemente le regole nel CSS.
– Se in una pagina utilizzaste sIFR per tutto il testo, il browser quasi sicuramente crasherebbe, poichè flash richiede ingenti risorse e il motore javascript si pianterebbe nel frattempo.
– Alcuni plugin per browser, oltre che alcuni antivirus e motori di ricerca, non vedono di buon occhio il flash, ed una quantità elevata di istanze potrebbero farli sospettare, bloccando lo script, quindi mai esagerare.
– I Javascript, in genere, possono rallentare il caricamento della pagina ed il Flash ancora di più, e poichè il tempo di caricamento sta diventanto un criterio di indexing/ranking per alcuni motori di ricerca, fare bene le proprie considerazioni in merito, prima di utilizzarlo. Un modo per migliorare il tempo di caricamento della pagina è di inserire tutti gli script nel footer, ma in quel caso, la pagina per pochi istanti potrebbe essere visualizzata con i caratteri CSS mentre lo script carica quelli in Flash.

Metodo 2 – Cufòn

Cufòn utilizza un piccolo script in Javascript ed è di sorprendente facilità nel setup.
Come per sIFR, necessita dei Javascript attivati e nel caso non lo siano, utilizzerà semplicemente i CSS.
Anche Cufòn vorrà che prima convertiate il vostro TrueType (TTF), OpenType (OTF) o Printer Font Binary (PFB) in modo che venga inserito all’interno dello script in modo automatico.
Ricordo che dovete avere tutte le licenze del caso, per utilizzare il font in questione (acquisto di una licenza commerciale per siti a scopo di lucro, mentre per uso personale potrebbe essere gratuito, meglio controllare comunque.)
Anche per questo metodo è consigliato convertire solo parti limitate di testo, quindi Headings ed eventualmente qualche paragrafo scelto in particolare.

Pro
Si ottiene il risultato sperato
Facilità estrema di setup
Script leggero senza rischio di crash (abusi a parte)
I motori di ricerca leggono comunque il testo

Contro
– Se l’utente non ha i Javascript abilitati, Cufòn non funzionerà.
– I Javascript, in genere, possono rallentare il caricamento della pagina, e poichè il tempo di caricamento sta diventanto un criterio di indexing/ranking per alcuni motori di ricerca, fare bene le proprie considerazioni in merito, prima di utilizzarlo. Un modo per migliorare il tempo di caricamento della pagina è di inserire tutti gli script nel footer, ma in quel caso, la pagina per pochi istanti potrebbe essere visualizzata con i caratteri CSS mentre lo script li converte.
– L’utilizzo massiccio di istanze potrebbe crashare il browser, quindi mai esagerare.

Metodo 3 – @font-face

Probabilmente il metodo che si riverelà, a lungo termine, il più efficiente.
Non richiede l’uso di Javascript né Flash, funziona direttamente nei CSS.
A differenza di quanto si creda comunemente, è già largamente supportato dai browser più usati, con Internet Explorer in testa da anni, FireFox che ha iniziato per ultimo a supportarlo con la versione 3.5, Safari (inclusi iPhone e iPad), Opera e Chrome. In generale le statistiche ci dicono che la regola CSS @font-face sia supportato attualmente al 92% globalmente.

Un esempio di utilizzo della regola @font-face nei CSS è la seguente:

/* Inserire prima di tutto la regola con il font relativo */
@font-face {
font-family: DeliciousRoman;
src: url(/Delicious-Roman.otf);
}
/* E poi creare regole per i font normalmente */
h1 {
font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}

La lista dei tipi di font compatibili con ciascun browser è la seguente:

• Internet Explorer (tutte le versioni – anche IE4): EOT
• Safari (3.2+): TTF / OTF
• iPhone (3.1) SVG
• Chrome (tutte le versioni): SVG (TTF/OTF aggiunto a Gennaio 2010)
• Firefox (3.5+): TTF/OTF (.WOFF aggiunto nella vers. 3.6)
• Opera (10+) TTF/OTF

Di conseguenza, per essere sicuri di aver la maggior copertura di browser possibili, vi consiglio di avere i seguenti formati: eot + ttf /otf + svg + woff
Per utilizzare questo metodo è ovviamente necessaria la relativa licenza per il/i font che utilizzerete (molti font adesso hanno licenza Web specifica), dovrete poi creare un “kit” font/css da inserire nel sito ed il gioco è fatto, potrete semplicemente continuare con il vostro CSS, come avete sempre fatto.

Pro
– E’ il metodo più indolore, nessuno script, nessun rallentamento pagina
– I motori di ricerca leggono il testo in modo assolutamente normale
– Nessun setup, basta creare il kit anche in moto automatico, metterlo in una delle cartelle del sito e linkarlo dall’head della pagina
– Vi permette di concentrarvi sui CSS piuttosto che su technicalities

Contro
A dire il vero non ce ne sono, è il modo più naturale ed efficiente di utilizzare font non-standard per il Web

[info]Per la lista di font installati su MAC, hook up nearby.
Per la lista di font installa comunemente su Windows (non è completa), potete https://www.shambix.com/gay-dating-websites-in-uk/.
Per una lista di font installati su Windows, con il loro equivalente su MAC, potete controllare qui.[/info]