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]

author avatar
Claudio Masci
Sono innanzitutto un appassionato di informatica e tecnologia in generale. Lavoro in ambito informatico da circa 16 anni, spaziando in diversi campi, andando dalla programmazione web, allo sviluppo di software, dalla grafica alla modellazione 3d ed al video editing, ho sempre voluto approfondire ogni aspetto e questo mi ha permesso di lavorare in diversi ambiti informatici.