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!
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:
