Uno degli aspetti di CSS3 che più è piaciuto ai creatori di siti internet è sicuramente la possibilità di "incorporare" un font personalizzato nella pagina ed utilizzarlo per stilizzare il testo. Questo ha dato molta libertà agli sviluppatori che non si sono più trovati limitati ai caratteri installati sui computer degli utenti finali (arial, verdana, tahoma, ecc.) ma hanno potuto spaziare tra le migliaia di font oggi reperibili in Rete conquistando una grande libertà creativa.
Naturalmente, per fare cioò, è necessario caricare il font che si desidera usare sul server e quindi creare una apposita regola di stile per incorporarlo, utilizzando la nuova direttiva @font-face di CSS3.
Formati di font
I tipi di font utilizzabili sono diversi (TTF, WOFF, SVG, ecc.) e godono di diverso supporto da parte dei principali browser. Vediamo nel dettaglio:
- Internet Explorer 9 e successivi, Firefox, Chrome, Safari e Opera supportano i font WOFF (Web Open Font Format).
- Firefox, Chrome, Safari e Opera supportano i font TTF (True Type Fonts) e OTF (OpenType Fonts).
- Chrome, Safari e Opera supportano anche i font SVG, mentre Internet Explorer supporta anche i font EOT (Embedded OpenType).
- Internet Explorer 8 precedenti non sono in grado di gestire font personalizzati.
E’ evidente, a questo punto, che volendo garantire una buona compatibilità cross-browser sarà necessario usare un set di font che comprenda almeno tre di questi formati, di norma TTF, WOFF e EOT.
Incorporare un font personalizzato con @font-face
Dopo aver individuato il font che più si adatta al vostro sito e averlo caricato sul server, la prima cosa da fare è includere nel nostro foglio di stile la regola @font-face con la quale possiamo caricare il font ed assegnargli un nome personalizzato.
Per le nostre prove useremo un font WOFF che gode del maggiore supporto dei browser. Potete scaricare dei font di questo tipo per fare delle prove dal sito font.mrw.it oppure da molti altri come dafont.com e fontsquirrel.
Per il nostro esempio noi useremo il font SansationLight.woff.
Ecco come creare la regola @font-face
@font-face {
font-family: fontPersonalizzato;
src: url(SansationLight.woff);
}Come potete vedere la direttiva @font-face prevede due attributi:
- font-family: con questo attributo si definisce un nome arbitrario per il font che andremo ad incorporare; mediante questo nome il font potrà essere utilizzato nel resto del nostro foglio di stile;
- src: con questo attributo si definisce il percorso fisico del file del font che desideriamo incorporare nella pagina.
E’ bene precisare che conviene definire la regola @font-face all’inizio del foglio di stile in modo da avere poi a disposizione il nome del font personalizzato per le regole di stile successive. Infatti, per usare il font personalizzato, bisogna utilizzare il nome definito nella regola @font-face che abbiamo appena descritto.
Come abbiamo detto è consigliabile caricare più tipi di file per il medesimo font al fine di soddisfare i requisiti di compatibilità dei diversi browser. Per farlo andremo a ripetere diverse volte l’attributo src come nell’esempio che segue:
@font-face {
font-family: fontPersonalizzato;
src: url(SansationLight.ttf) format('truetype'),
url(SansationLight.woff) format('woff'),
url(SansationLight.eot) format('embedded-opentype');
}Nell’esempio, all’interno dell’attributo src, abbiamo esplicitato anche il formato che, invece, nell’esempio precedente avevamo omesso.
Una volta che il font è stato incorporato nella pagina può essere utilizzato all’interno delle altre direttive di stile semplicemente indicandone il nome nella proprietà font-family dell’elemento che si desidera stilizzare.
Impostare un font di fallback
E’ bene ricordare che CSS3 non è universalmente supportato quindi è una buona regola prevedere uno font "di scorta" quando si utilizza un font personalizzato. Ad esempio:
h1 {
font-family: fontPersonalizzato, Verdana, Arial;
...
}In questo modo, qualora CSS3 non fosse supportato, il nostro elemento verrebbe formattato con un font standard tra quelli previsti.
Le proprietà del font personalizzato
Negli esempi visti sino ad ora abbiamo usato la regola @font-face nella sua formulazione più semplice. Infatti, abbiamo specificato solo il nome da usare per il font e le url da cui recuperare i file. In realtà, è possibile creare diverse regole @font-face con più varianti dello stesso carattere.
Il font SansationLight.woff, ad esempio, ha un corrispondente grassetto che può essere usato ogni volta che nel testo si chiede una porzione bold per il font personalizzato.
Anche questo secondo font, SansationBold.woff, va caricato sul server e quindi richiamato con una specifica regola di stile.
@font-face {
font-family: fontPersonalizzato;
src: url(SansationLight.woff);
font-weight: normal;
}
@font-face {
font-family: fontPersonalizzato;
src: url(SansationBold.woff);
font-weight: bold;
}Questo secondo font (che è stato incorporato con lo stesso nome del primo) viene usato ogni volta che fontPersonalizzato deve essere reso in grassetto. Ciò è possibile grazie alla proprietà font-weight che indica al nostro CSS quale versione del font utilizzare per il grassetto.
Vediamo un esempio completo di un ipotetico font disponibile in 4 differenti versioni: Normal, Bold, Italic e Bold-Italic.
@font-face {
font-family: 'MioFont';
src: url('MioFont-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'MioFont';
src: url('MioFont-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'MioFont';
src: url('MioFont-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'MioFont';
src: url('MioFont-BoldItalic') format('truetype');
font-weight: bold;
font-style: italic;
}Si notino, nell’esempio qui sopra, le diverse combinazioni delle proprietà font-weight e font-style.
Per concludere la nostra panoramica su @font-face elenchiamo (sinteticamente) di seguito le diverse proprietà che è possibile definire per il font personalizzato:
- font-weight: definisce il peso del carattere, ovvero quanto è "grassetto". I valori possibili sono:
- normal
- bold
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- font-style: definisce lo stile del carattere. I valori possibili sono:
- normal
- italic
- oblique
- font-stretch: definisce il modo in cui il font deve essere espanso o compresso. I valori possibili sono:
- condensed
- expanded
- semi-expanded
- extra-expanded
- ultra-expanded
- unicode-range: definisce l’intervallo di caratteri unicode supportati dal font. Il valore predefinito è U+0-10FFFF
Considerazioni conclusive
Nell’utilizzare font non standard all’interno delle proprie pagine web si consideri il peso (in termini di Kb) di queste ultime e quanto questo possa incidere nei tempi di caricamento del sito web. E’ bene ricordare, infatti, che un buon sito, prima ancora di essere esteticamente gradevole, deve essere funzionale e veloce.
