Richiamare i font di sistema su WordPress

I font di sistema possono essere un’ottima alternativa ai classici web fonts, io li utilizzo qui su WPlab.it, mi piace molto l’aspetto che danno al mio sito e sono felice di evitare ulteriori caricamenti ai miei utenti.

Nello sviluppare i miei progetti web ho sempre posto molta attenzione alle prestazioni per una questione di posizionamento sui motori di ricerca ma, soprattutto, per permettere una migliore esperienza agli utenti dei siti web che realizzo.

Nel mio articolo dove ti spiego come velocizzare WordPress, tra i vari consigli, consiglio anche di impostare font di sistema nel proprio tema, questo perché usando un font di sistema non è necessario caricare alcun font e, quindi, la pagina web risulterà più veloce da caricare.

Cosa sono i font di sistema?

Quando realizza un sito web, solitamente, il web designer richiama uno o più font per stilizzare il testo delle pagine web che andranno a comporre il sito in questione.

Di conseguenza il browser dell’utente che visita il sito web effettua il download di uno o più file (i font appunto) e, anche se si tratta di file abbastanza piccoli e leggeri, questo comporta comunque un leggero rallentamento nel caricamento della pagina web.

Il font di sistema è il set di caratteri utilizzato nativamente da un sistema operativo.

I font si sistema sono gratuiti, hanno un bell’aspetto in quanto corrispondono al sistema operativo e, soprattutto, non richiedono tempi di download!

Inoltre, i font di sistema, sono utilizzati da tantissimi siti web tra cui Booking.com, Bootstrap, GitHub, Ghost, Medium e persino dall’area di amministrazione di WordPress.

Fino ad alcuni anni utilizzare font di sistema su un sito web fa non avrebbe comportato un risultato esteticamente gradevole ma, fortunatamente, i sistemi operativi recenti hanno caratteri preinstallati molto belli che possiamo utilizzare nei nostri siti web.

Ovviamente, può capitare di dover sviluppare siti web con esigenze grafiche particolari che non permettono l’utilizzo di font di sistema ma credo sia un’opportunità da tenere in considerazione.

Come richiamare il font di sistema?

Per impostare il font di sistema sul tuo sito web devi aggiungere questo codice al tuo foglio di stile:

body, p {
 font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}


h1, h2, h3, h4, h5, h6 {
 font-family:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

Fatto questo, ricordati di disabilitare i caratteri caricati da terze parti (come ad esempio Google Fonts); questo codice va adattato al tuo tema ma, in linea di massima, dovrebbe funzionare.

Autore: Gianluca Porzio

Appassionato di informatica fin da piccolo, mi occupo di marketing digitale e sviluppo web. Sono l'ideatore e l'autore di WPlab, sviluppo siti web dal lontano 1999, ho iniziato a utilizzare WordPress nel 2008 e modero con passione la sezione WordPress del Forum GT (adesso Connect.gt). Seguimi su Twitter @wplabit.

Lascia un commento

Share This