Utilizzare Fonts personalizzati tramite CSS

In questo post vedremo come poter utilizzare, qualunque tipo di fonts disponibile, indipendentemente dal browser o piattaforma che verrà utilizzata. Questo metodo ci permetterà di utilizzare e visualizzare nelle nostre pagine web, qualunque tipo di fonts, anche nel caso in cui il font in questione, non è presente e disponibile lato client.
Questo limite è stato superato, grazie all’utilizzo del fogli stile CSS.

Apriamo il nostro foglio stile, solitamente si chiama stile.css e inseriamo le seguenti righe di codice:

@font-face {

     /* Creo il nome del font */
     font-family: 'Nome font';

          /* Collego il font indicando il percorso */
          src: url('percorso/font.eot') format('eot'),
               url('percorso/font.ttf') format('truetype'),
               url('percorso/font.otf') format('opentype');
}

Come possiamo vedere dall’esempio, tramite il selettore @font-face inserisco le istruzioni per utilizzare il mio font personalizzato.
Con l’istruzione font-family() definisco il nome del font da utilizzare.
Con local do istruzione a utilizzare un font locale se presente, l’istruzione URL() indica il percorso del font ed in fine format() definisce il formato.

E’ possibile generare i vari formati di fonts da utilizzare, partendo da un solo formato disponibile, recandosi al sito transfonter.org

Lascia un commento