Oggi introduco la proprietà @font-face per l’utilizzo di font non convenzionali all’interno di pagine web. Negli articoli precedenti parlavo di sifr e cufòn, due metodi alternativi per operare con la stessa efficacia grafica la conversione di caratteri personalizzati. Chi utilizza font-face e ogni proprietà CSS3 cosi come HTML5 deve effettuare tutte le ipotesi e riflessioni del caso poiché entrambi saranno standardizzati ufficialmente dal World Wide Web Consortium non prima del 2014.
Quando non devo usare font-face?
Seguendo la premessa sopracitata font-face, così come tutte le proprietà CSS3 non devono essere utilizzate nei seguenti casi:
- Se il sito deve rispondere alle specifiche della legge Stanca;
- Di conseguenza se il progetto interessa:
- Pubbliche amministrazioni;
- Aziende private rivenditrici di servizi pubblici;
- Aziende di trasporto e telecomunicazioni;
- Per maggiori informazioni clicca qui.
- Se il progetto deve essere un documento validato;
- Se il progetto deve essere fruibile a portatori di handicap in particolare non vedenti.
Font-face e compatibilità browser
Ecco una tabella illustrativa che ci permette di capire con quali estensioni ogni browser interpreta i font dati in pasto:
| Ttf | Otf | Svg | Eot | Woff | Prf | |
|---|---|---|---|---|---|---|
| Safari, Webkit | ||||||
| Safari Mobile | da ios 4.2 | da ios 4.2 | da ios 4.1 | |||
| Internet Explorer | fino a IE 8 | da IE 9 | ||||
| Google Chrome | dalla versione 6 | |||||
| Opera | dalla versione 10 | dalla versione 10 | dalla versione 10 | |||
| Opera mobile | dalla versione 9.7 | dalla versione 9.7 | dalla versione 9.7 | |||
| Netscape | dalla versione 4 |
Sintassi
La sintassi è molto semplice, come prima cosa va inizializzata la classe passandogli il nome del font e il percorso fisico:
@font-face {
font-family: 'nome_font';
src: url('percorso_font.ttf') format('truetype');
}
dopodiché possiamo utilizzarla:
h1{ font-family: 'nome_font', Arial, sans-serif; }
il tutto, ovviamente, va fatto all’interno del foglio di stile.
Sintassi cross browser
Come illustra la tabella delle compatibilità se vogliamo che il font personalizzato sia visibile sulla maggior parte dei browser dobbiamo avere la pazienza di includere fisicamente tutti i formati sopracitati (Ttf, Eot, Woff, e così via). La sintassi diventa la seguente:
@font-face{
font-family: 'Yorkville';
src: url('fonts/kit/yorkville-webfont.eot');
src: url('fonts/kit/yorkville-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/kit/yorkville-webfont.woff') format('woff'),
url('fonts/kit/yorkville-webfont.ttf') format('truetype'),
url('fonts/kit/yorkville-webfont.svg#webfont') format('svg');
}
chiaramente se ho in possesso altri formati posso incrementare le righe di inclusione la cui sintassi è:
url('percorso_fisico') format('formato');
il risultato sarà il seguente:
Questo è un esempio di @font-face
Velocizzare le operazioni
Font Squirrel è un ottimo servizio che dato in input un font tra i formati descritti prima restituisce in output un file zip con tutti i formati necessari alla quasi totale compatibilità tra i browser risparmiandovi una fatica non indifferente.
Inoltre il servizio dispone di una lista di font free e gratuiti già convertiti e pronti per l’utilizzo.
Conclusioni
Tutto ciò che riguarda innovazione e miglioramento va recensito e discusso, ma come insegna la storia dell’informatica l’innovazione di oggi sarà un ricordo domani quando nel 2014 potrebbe già essere tutto vecchio e superato, per cui chi utilizza font-face e proprietà CSS3 deve a monte effettuare un’analisi di compatibilità e soprattutto di accessibilità…come si direbbe per un medicinale: font-face: agitare bene prima dell’uso!
15 comments
Aurora dell'Erba
11 Dicembre 2011 at 20:45
Per chi non ha molte pretese di cercare font sofisticati anche google font può andare bene. Più che altro risparmia la fatica di convertire quei file manualmente.
Gaetano Miccio
29 Luglio 2013 at 11:54
Si anche se di tanto in tanto Google Font da qualche problema con il cross-browser infatti spesso basta un banale font-weight per non fargli renderizzare il font. 🙁
Fabiana Testini
12 Dicembre 2011 at 1:31
a proposito di google font…con chrome per mac non riesco a vedere i font. Qualcuno sa perche’?
Gaetano Miccio
29 Luglio 2013 at 12:35
Questione di proprietà. Controlla i font-weight o gli attributi testo è molto probabile che il font in questione non li supporta era proprio quello che dicevo in un post di risposta poco fa 😉
francesco
12 Dicembre 2011 at 8:48
La tabella di compatibilità (molto ben fatta tra l’altro) aiuta a capire il perchè tutto questo non è ancora uno standard…
Pierpaolo Cerna
12 Dicembre 2011 at 11:50
Ovviamente l’aspetto grafico del font varia dall’anti alias del browser e dal sistema operativo? Con mac è perfetto con win un po’ meno
mike
16 Dicembre 2011 at 9:45
si, dipende dall’anti-alias dei browser, ovviamente con cufon e sifr non hai questo problema perchè utilizzano o js o flash.
Gaetano Miccio
29 Luglio 2013 at 11:57
si @mike non vorrei essere rompiscatole ma utilizzare quelle tecniche lì è controproducente per il SEO e non è proprio il massimo visto che è risaputo che un sito bello vale meno di zero se non è “visitato” 😛
Pingback: Articoli della settimana 18/12/2011 | Saverio Gravagnola
Fabio Buda, Netdesign
8 Febbraio 2012 at 15:50
Ricordate che alcune versioni di firefox supportanto @font-face soltanto se viene inserito il Path assoluto al Font:
src: url(‘http://mydomain.com/fonts/kit/yorkville-webfont.eot’);
piuttosto che quello relativo.
Ricordate quindi di usare Path assoluti per i vostri font.
Saluti,
Fabio Buda, Web Developer/Designer @netdesign
Mario Concina
11 Febbraio 2012 at 12:37
Grazie!
Ogni consiglio è utile a migliorare l’esperienza.
Lorenzo
12 Ottobre 2012 at 16:29
Non capisco perchè non si possa usare per la Legge Stanca, se uno browser non supporta il webfonts di conseguenza ne farà vedere uno di default, giusto?
Mario Concina
12 Ottobre 2012 at 16:38
A rigor di logica è giusto ma a rigor di legge non è corretto poiché css3 non è ancora uno standard riconosciuto e di conseguenza non rispecchia le linee guida del wcag.
Tocchi un tema molto delicato in realtà.
Lorenzo
12 Ottobre 2012 at 18:03
Si lo so che è un tema delicato, ma siccome devo fare un sito Stanca, e mi son rotto di fare della schifezze grafiche vorrei farlo figo! Ora stanca si appoggia a wcag2, neanche wcag2 accettta cs3? che palle! voglio fare un sito figo! Da quel ho capito jQuery si può usare basta che si dia sempre un valida alternativa per chi non ha i JS attivare nel browser è corrett?
Mario Concina
29 Luglio 2013 at 12:27
Dai un’occhiata a questo articolo, potrebbe interessarti. http://www.marioconcina.it/blog/web-design/accessibility-e-legge-stanca-nellera-del-web-2-0.html
Da poco sto curando una rubrica settimanale sull’accessibilità viste le numerose richieste di trattare l’argomento.
http://www.marioconcina.it/blog/category/accessibilita