Font personalizzati con @font-face - GM Multimedia

Vai ai contenuti

Menu principale:

Font personalizzati con @font-face

HTML.HTML5.PHP CSS.CSS3.Javascript



          In questo tutorial vedremo come visualizzare font non standard nelle nostre pagine web cercando di conservare la compatibilità con tutti i browser.

          La proprietà di cui ci occuperemo è @font-face, una regole delle @-rules. Useremo questa proprietà per caricare nelle pagine web font non standard salvati nella directory del nostro sito. Questo ci consente, quindi, di visualizzare correttamente il font su tutti i browser anche quando esso non è installato all’interno del PC dell’utente.

I formati dei Fonts supportati dai vari browser

          Corre l’obbligo di soffermarci sui formato dei fonts, in considerazione del fatto che come al solito Internet Explorer (IE) non supporta il classico formato .TTF, pertanto becessita di un codice apposito.

Di seguito vediamo una tabella esplicativa dei formati abbinati ai vari browser.
BRAWSEREOTTTFWOFF
Mozilla FireFox versione <= 3.5



Mozilla FireFox versione >= 3.6

Opera


Chrome


Safari


Internet Explorer

          Come si può vedere, Internet Explorer, è stato il primo browser a supportare i font personalizzati, ma nonostante ciò non supporta il formato TrueType ma solo i file Embedded OpenType (eot).

          Per rendere del tutto cross-browser le nostre pagine web, abbiamo quindi bisogno di due file: un file True Type (.ttf) e un file Embedded OpenType (.eot).

          Quando scarichiamo un font ci viene dato solo il file .ttf (o Open Type) ma non il file .eot. Per questo motivo dobbiamo convertire i file .ttf in .eot. Online è disponibile una semplicissima applicazione, ttf2eot, che in pochi passi ci consentono di convertire i nostri fonts in .eot.

@font-face

La sintassi base di @font-face necessita di soli due elementi:
  1. font-family: con cui si definisce il nome del font;
  2. src: contenente il path del font.

La sintassi base della regola pertanto è la seguente:

@font-face {
font-family: 'nome-font';
src: url('nome-font.ttf') format('truetype');
}

          Per la compatibilità con Internet Explorer e per evitare il caricamento del font nel caso fosse già presente sul PC dell’utente, bisogna modificare questa sintassi.

          Grazie ai CSS possiamo includere le proprietà all’interno della stessa regola evitando fogli di stile aggiuntivi.
Includiamo quindi la proprietà per Internet Explorer:

src: url(‘nome-font.eot’);

          Per consentire il caricamento del font dal PC dell’utente, nel caso fosse presente bisogna modificare la proprietà src della regola iniziale nel seguente modo:

src: local('nome-font’), url(‘nome-font.ttf') format('truetype');

Pertanto il codice completo compatibile con tutti i browser, è il seguente:

@font-face {
font-family: ‘nome-font’;
src: url(‘nome-font.eot’);
src: local('nome-font'),url('nome-font.ttf') format('truetype');
}

          Le due regole src, inserite in questo ordine, evitano inutili richieste HTTP ad Internet Explorer. Se avessimo invertito le regole, infatti, IE avrebbe caricato inutilmente il file .ttf per poi caricare l’unico file di cui effettivamente necessita, l’eot.

          Una volta definito il font con la proprietà @font-face, è sufficiente richiamarlo all’interno delle normali regole CSS per farlo funzionare correttamente



Visitatori online:
Sei il nostro visitatore n°:
© - Copyright 2015. - Tutti i diritti riservati - G.M. Multimedia
Torna ai contenuti | Torna al menu