CSS – Come Aggiungere un Font personalizzato

CSS - Come Aggiungere un Font personalizzato

[vc_row][vc_column][wpproads id=”202″ center=”1″][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]Durante lo sviluppo di un sito web, ci si trova ad inserire diversi contenuti testuali, ed a questi contenuti andrà associato un font.

Potrebbe capitare che tra i font diffusi per il web non ci sia quello adatto al nostro sito web, e per esigenze grafiche o di gusto si voglia caricare un proprio font.

E’ possibile caricare un font personalizzato tramite codice CSS, in questo articolo vedremo insieme come fare.

[/vc_column_text][vc_column_text]

Come Aggiungere un Font personalizzato ad un sito web

[/vc_column_text][vc_column_text]Come primo passo per aggiungere un font personalizzato ad un sito web, andiamo a creare una cartella nella quale caricare il Font da inserire, per semplicità consiglio di creare la cartella nella radice del sito e non in una sottocartella.

La cartella che andremo a creare, sempre per semplicità si chiamerà Fonts.

Andiamo a caricare il carattere all’interno di questa cartella in modo che il risultato finale sarà qualcosa del tipo: www.miosito.com/fonts/carattere.ttf[/vc_column_text][vc_column_text]

Come Aggiungere un Font al foglio di stile CSS del sito

[/vc_column_text][vc_column_text]Ora che il font è presente sul server del nostro sito, dovremo caricarlo all’interno del foglio di stile, per fare questo useremo il tag @font-face

@font-face {
font-family: NomeFONT;
src: url(/fonts/font.ttf);
}

Con il tag @font-face andiamo a creare un nuovo carattere collegato al foglio di stile CSS, nel quale andiamo a definire 2 attributi:

  • font-family: il nome del font
  • src: il percorso nel quale trovare il font

[/vc_column_text][vc_column_text]

Come associare un Font dal foglio di stile CSS del sito ad un testo

[/vc_column_text][vc_column_text]Ora che il font è caricato all’interno del foglio di stile, dovremo creare una classe da associare ai testi per i quali vogliamo utilizzare il nuovo font.

.nuovofont{
font-family: NomeFont;
…..
}

La classe chiamata nuovofont dovrà poi essere associata ad un testo che in questo modo andrà a prendere gli attributi di quella classe e verrà quindi mostrato con il carattere scelto.

Esempio:

<p class=”nuovofont”>Testo da visualizzare con il nuovo font</p>

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][wpproads id=”233″ center=”1″][/vc_column][/vc_row]

Scopri di più da ClaudioMasci

Abbonati ora per continuare a leggere e avere accesso all'archivio completo.

Continue reading