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