Come possiamo personalizzare i font con CSS?

Inserendo un font particolare possiamo personalizzare i titoli, il menù e i testi dei nostri articoli, in modo da renderli unici nel web.

Aggiungendo una piccola regola al file CSS: @font-face.

Per scegliere il nostro font, che dovrà essere gratuito possiamo o prendere quelli già installati sul nostro computer, oppure cercarne uno su Internet: un buon sito è  www.fontsquirrel.com, in cui troverete una vastissima gamma di font!

HTML & CSS

Dopo avere individuato il nostro font, per renderlo compatibile nel web andiamo sulla pagina ‘@font-face Generator‘, sempre su www.fontsquirrel.com:  qui facciamo l’upload del nostro font, generiamo il pacchetto e lo scarichiamo sul pc. In questo pacchetto troveremo il font suddiviso in 4 tipi, che lo rendono compatibile con tutti i maggiori browser.

Ora carichiamo il pacchetto sul server e modifichiamo il nostro file CSS:

@font-face {
font-family: ‘Arial’;
src: url(‘arial-webfont.eot’);
src: local (‘ ‘), url(‘arial-webfont.woff’) format (‘woff’), url(‘arial-webfont.ttf’) format(‘truetipe’), url(‘arial-webfont.svg#Arial’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

In pratica questa regola prima dice al browser di controllare se esiste il font sul computer; se qui non è installato, la stringa farà caricare al browser il font con l’estensione corretta per permetterne la visualizzazione! 

Altra soluzione è questa:

@font-face {
font-family: MyFontName;
src: url(http://www.mywebsite.it/fonts/MyFontName.ttf); }
p { font-family: MyFontName, verdana; }

 

Una volta inserito il file MyFontName.ttf (font di esempio) all’interno della cartella fonts del nostro sito, è possibile visualizzare il Font di nome MyFontName o in alternativa se il browser non supporta CSS3 il font Verdana.

Altre informazioni potete trovarle qui http://www.w3.org/TR/css3-fonts/#the-font-face-rule.

Ecco ottimi Editor CSS che potete utilizzare:

Fabrizio Cannatelli

Autore e Founder di Informarea, sono un appassionato di informatica e tecnologia da sempre. La voglia di comunicare e di condividere sul Web le mie curiosità e le mie conoscenze, mi ha spinto a lanciarmi nel progetto di questo sito. Nato un po' per gioco e un po' per passione, oggi è diventato una grande realtà.

Fabrizio Cannatelli

Approfondimenti

Lascia un commento

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.