CSS3: utilizzare la proprietà “font-face”

CSS3: utilizzare la proprietà “font-face”

1590
15
CONDIVIDI

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!

  • Aurora dell’Erba

    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

      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. :(

  • a proposito di google font…con chrome per mac non riesco a vedere i font. Qualcuno sa perche’?

    • Gaetano Miccio

      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

    La tabella di compatibilità (molto ben fatta tra l’altro) aiuta a capire il perchè tutto questo non è ancora uno standard…

  • Pierpaolo Cerna

    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

      si, dipende dall’anti-alias dei browser, ovviamente con cufon e sifr non hai questo problema perchè utilizzano o js o flash.

    • Gaetano Miccio

      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()

  • 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

      Grazie!
      Ogni consiglio è utile a migliorare l’esperienza.

  • Lorenzo

    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

      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

      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?

    • 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