[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]
Rispondi