La proprietà  @font-face: usiamola con attenzione (parte 1)

La scelta del carattere (in senso tipografico) è sempre stato un punto fondamentale nella progettazione Web. La decisione è sempre stata oculata, in quanto, il carattere voluto doveva essere presente sul computer utente, pena l'impossibilità  di visualizzarlo. Ragion per cui, si puntava solitamente a caratteri standard, di quelli che in genere sono presenti sulla totalità  dei sistemi operativi.

Ci sono stati nel tempo vari stratagemmi per rendere possibile l'utilizzo di caratteri "non standard": dall'utilizzo di immagini (utile solo nel caso di header o parti del sito ben definite) a metodi più sofisticati e complicati. Grazie alla proprietà  @font-face, tutto questo è possibile senza troppi problemi ma... facciamolo con attenzione.

@font-face {
font-family: MyFamily;
src: local("HelveticaNeue-Bold"),
url(myFamily.ttf) format("truetype");
}

body { font-family: MyFamily; }

La parte più interessante della proprietà  @font-face è l'attributo src, settato una prima volta a local, proveremo quindi a caricare il font dal computer dell'utente. Se sul computer locale quel font non è disponibile si procederà  a recuperarlo dal server, seguendo le istruzioni dell'attributo url.
A questo nuovo carattere sarà  possibile assegnare un nome di famiglia, in questo caso abbiamo scelto MyFamily e useremo questa family per tutto il nostro documento (vedi le proprietà  per body). La direttiva format ci serivirà , invece, per distinguere i caratteri TrueType da quelli OpenType.

Tutto bellissimo fin qui, senza dubbio, ma come sappiamo i CSS sono interpretati dal browser utente, quindi il comportamento potrebbe variare da caso a caso. Se questo browser fosse Internet Explorer vecchissima edizione, come al solito, gestirebbe il tutto in un modo diverso, ad esempio, ammetterebbe solo l'importazione di caratteri Embeddable Open Type (eot). Inoltre non permetterebbe di sfruttare le direttive format e local. Una dichiarazione @font-face che contenga la proprietà  format sarà  automaticamente ignorata da IE. Ergo bisognerà  effettuare un controllo sul browser utente e agire di conseguenza se il browser rilevato fosse di casa Microsoft.

Ad ogni modo le insidie non sono ancora finite e ne scoveremo altre nella seconda parte.