Come importare un font con @font-face per puoi applicarlo ad un titolo.

Nella costruzione di un sito web una cosa come lo font potrebbe apparire un elemento secondario e quindi potrebbe essere trascurato. Ma ci sono dei font che seguendo la tematica del nostro sito potranno aggiungere un effetto inaspettato nel senso positivo.

Per esempio se avete un sito web che parla della cucina si potrebbe utilizzare per titoli un font speciale che si chiama KitchenKapers. E se il vostro sito dedicato al ciclismo si possa usare un font che si chiama CYCLING_.TTF o se il vostro sito e dedicato a fai da te o edilizia si possa utilizzare lo font che si chima Cartoon Blocks.ttf
Ogi vedimo prima di tutto come colegare questi font alla nostra pagina web e in secondo momento come appariranno nel sito.

Come importare un font nuovo in un sito web?

Per collegare I font sopra citati e come potresti vedere come estensione sono .ttf  useremo la regola di css @font-face{}
Vediamo la sintassi:

@font-face{
 font-family:KitchenKapers;
 src: url(font/KitchenKapers.ttf);//indicare percorso giusto per arrivare al fail del font//
 }

Questa regola dobbiamo inserire al inizio del nostro foglio di stili CSS del sito

Come applicare un font al titolo o paragrafo

Dopo di che  posiamo applicare uno di questi font citati sopra ad un titolo nel nostro sito, per esempio posiamo creare una regola con la classe

h2.font_kitchen{
font-family:'KitchenKapers';
font-size:22px
color: blue;
}

 

E applicare questa classe ad un titolo e alla fine avremo un titolo del genere.

La ricetta del giorno

Come fare un muro

Bicicletta

Vorrei far notare che se si intende di collegare piu di un font al tuo foglio di stile ogni font dovrebbe avere la sua regola @font-face

@font-face{
 font-family:KitchenKapers;
 src: url(font/KitchenKapers2.ttf)format('truetype');}
 
 @font-face{
 font-family:CartoonBlocks;
 src: url(font/CartoonBlocks.ttf)format('truetype');
 }

E qui sotto potete scaricare I font del tutorial nell' archivio.

Letto 466 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso