Come possiamo personalizzare i font con CSS?

0 Condivisioni

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(https://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:

0 Condivisioni

Fabrizio Cannatelli

Fondatore di Informarea.it, è un appassionato di informatica. Ha lavorato per molti anni come Analista Programmatore presso varie aziende utilizzando diversi linguaggi di sviluppo, oggi svolge un lavoro completamente diverso ma la voglia di comunicare e di condividere con il web i suoi studi e le sue curiosità lo hanno spinto a far nascere questo blog non solo per esprimere e mostrare la passione per questo mondo, ma anche per confrontarsi con nuove esperienze di sviluppo.

Fabrizio Cannatelli

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

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