@font-face: come usare font personalizzati nella tua pagina web

Se sei un Web Developer puro piuttosto che un Web Designer, il metodo più comune del quale sono quasi sicuro ti sarai servito per incorporare web fonts nel tuo sito web, è quello dei Google-Fonts. Ma sapevi che usando la proprietà @font-face puoi includere i tuoi font personalizzati?

Naturalmente a differenza della prima tecnica, per poter includere un font personale, dovrai fare in modo di installare il font sul tuo server per poi poterlo successivamente richiamare tramite la proprietà CSS3 @font-face.

Formati di font

Prima di procedere è bene sapere che esistono diversi tipi di font (TTF, WOFF, SVG ecc.) e ognuno di loro ha il proprio tipo di supporto sui vari browser. Scopriamolo insieme nel dettaglio:

• WOFF (Web Open Font Format): formato supportato da Internet Explorer 9 e successivi, Firefox, Safari e Opera.
• OTF (Open Type Fonts), TTF (True Type Fonts) e OTF (OpenType Fonts): formato supportato da Firefox, Chrome e Safari.
• SVG: formato supportato da Chrome, Safari e Opera
• EOT (Embedded OpenType): Formato supportato da Internet Explorer.

N.B. Internet Explorer 8 e precedenti non gestiscono font personalizzati.

Possiamo quindi concludere che per avere una buona compatibilità cross-browser, dovremo utilizzare almeno i formati TTF, WOFF e EOT.

Incorporare un font personalizzato con @font-face

Una volta individuato il font che utilizzerai nel tuo sito e, dopo averlo caricato nel server, dovrai includerlo nel tuo foglio di stile utilizzando la regola @font-face con la quale sarà possibile caricare il font.

Sotto farò una prova con un font WOFF che copre la maggior parte dei browser. Se stai cercando dei font da scaricare, potresti trovare qualcosa su fontsquirrel.com.

Per l’esempio userò il font carrara-lig-webfont.woff.

Ecco come incorporare la regola @font-face

@font-face{
  font-family: 'carraralight';
  src: url('carrara-lig-webfont.woff');
}

Come puoi notare, la regola @font-face, prevede la definizione di due proprietà:

• font-family: in questa proprietà dovrai definire il nome arbitrario del font da andare ad includere. Mediante questo nome, potremo utilizzare il font nel resto del nostro foglio di stile.
• src: con questo attributo, si definisce il percorso fisico del file del font che desideriamo incorporare nel nostro sito.

Ci tengo a ricordare, che è buona prassi richiamare la regola del @font-face all’inizio del tuo foglio di stile, in modo da avere il nome del font a disposizione per poter essere richiamato nelle regole successive. Infatti per poter utilizzare il font personalizzato, dovrai utilizzare il nome definito nella regola @font-face appena descritta.

Come abbiamo visto precedentemente, è consigliabile caricare nella cartella di progetto, più tipi di file per il medesimo font, affinché ci sia una maggiore compatibilità cross-browser. Per farlo, dovrai utilizzare l’attributo src come nell’esempio qui sotto:

@font-face{
  font-family: 'carraralight';
  src: url('carrara-lig-webfont.woff') format('woff'),
  src: url('carrara-lig-webfont.ttf') format('truetype'),
  url('carrara-lig-webfont.woff') format('embedded-opentype');
}

In questo esempio ho specificato di seguito all’attributo src anche il formato, cosa che non avevo fatto prima.

Una volta incorporato il font all’interno della pagina, può essere utilizzato anche in altre direttive, semplicemente richiamando la proprietà font-family dell’elemento che desideri formattare.

Font fallback

Anche se non è percepito come fino a qualche anno fa, è bene ricordare che la compatibilità è ancora un elemento da tenere in considerazione, in quanto il CSS3 non è universalmente supportato.

A questo proposito può tornare utile dichiarare un font “di scorta”, soprattutto quando si usa un font personalizzato. Per farlo basterà procedere come segue:

h1{
  font-family: 'fontPersonale', Helvetica, Arial, serif;
}

In questo modo, laddove il CSS3 non fosse supportato, l’elemento sarà comunque formattato con uno degli altri suggeriti, prima di usare quello predefinito del browser.

Le proprietà del font personalizzato

Fino ad ora ci siamo concentrati sulla regola del @font-face nella sua stesura più semplice. Per ora infatti, ci siamo limitati a specificare solo il nome da usare per il font e le url da cui recuperare i file. In realtà, possiamo fare anche altro come ad esempio creare diverse regole @font-face con più varianti dello stesso carattere.

Il fontcarrara-lig-webfont.woff, ha anche un corrispondente extra light (ancora più sottile), che potete utilizzare ogni volta che nel testo avete bisogno di una porzione di testo più sottile.

Anche in questo caso il font dovrà essere caricato sul server e richiamato con una specifica regola di stile.

@font-face {
  font-family: fontPersonalizzato;
  src: url('carrara-lig-webfont.woff');
  font-weight: normal;
}
@font-face {
  font-family: fontPersonalizzato;
  src: url('carrara-extra-lig-webfont.woff');
  font-weight: lighter;
}

Potrete utilizzare questo secondo font che si chiama come il primo, utilizzando la proprietà font-weight che indicherà al nostro CSS quale versione dovrà utilizzare per avere il testo più sottile.

Allo stesso modo possiamo procedere per incorporare un font disponibile in 4 differenti versioni: Normal, Bold, Italic, 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;
}

Per concludere la nostra panoramica sulla proprietà @font-face, di seguito possiamo elencare le diverse proprietà che è possibile definire per il font personalizzato:

• font-weight: indica il peso del carattere, ovvero quanto spesso deve essere il carattere. I valori possono essere:
  • 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: alcune famiglie di fonts, offrono la possibilità di avvicinare o distanziare di default i caratteri tra di loro. I valori possibili sono:
  • condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
• unicode-range: definisce l’intervallo di caratteri unicode supportati dal font. Come tutte le altre proprietà anche questa ha il suo valore predefinito che è U+0-10FFFF.

Conclusioni

Come per tutto, anche in questo caso bisogna prestare attenzione all’uso di questi font personalizzati, e nello specifico bisogna fare attenzione al loro peso (in Kb) che andrà ad incidere sui tempi di caricamento di una pagina. Di solito non è una buona pratica usare più di 2 fonts all’interno del proprio sito (1 per i titoli e uno per il testo). Ricordate che, un buon sito oltre ad essere gradevole, deve essere anche funzionale!

Se ti è piaciuto il post, ti chiedo di consigliarlo ad un amico o lasciare un commento qui sotto. Te ne sarei davvero grato ?!