Passare a uno stack di font di sistema in WordPress (come e perché)

Sono un grande fan delle prestazioni web. Ma penso anche che non dovrebbe o debba compromettere il design. C'è sempre un buon equilibrio nel mezzo. Nel 2017, ero sul blog di GitHub e stavo scavando il loro carattere. È stato super facile da leggere. Così ho scavato nelle proprietà con Chrome Devtools e ho visto che stavano usando uno stack di font di sistema .

Uso i font di sistema da anni ormai e li adoro. Quindi oggi voglio mostrarti come utilizzare uno stack di font di sistema sul tuo sito WordPress.

Che cos'è uno stack di caratteri di sistema?

Ci sono diversi tipi di font tra cui scegliere per un sito web. Hai praticamente quattro diverse opzioni:

• Font sicuri per il Web: gratuiti e senza tempo di download richiesto dal browser, ma in genere sembrano datati e quindi non vengono utilizzati molto. A nessuno piace davvero Arial o Tahoma, vero? Visualizza un elenco completo di caratteri sicuri per il Web.
• Font Web: sono belli, ma richiedono il download dal browser. Disponi di opzioni gratuite e premium. Aggiunge al peso complessivo della pagina del tuo sito web. Tuttavia, possono essere serviti dalla CDN memorizzata nella cache. I fornitori includono Google, Adobe Fonts (TypeKit), ecc.
• Host web font localmente: sono disponibili sia opzioni gratuite che premium. Richiede comunque tempo di download e può sfruttare una singola connessione HTTP/2 su CDN memorizzata nella cache. Tutti i principali browser ora hanno un partizionamento della cache separato, quindi ospitarli localmente è in realtà migliore per le prestazioni. Puoi ospitare i tuoi font Google localmente con Perfmatters.
• Caratteri di sistema: gratuiti, hanno un bell'aspetto poiché corrispondono al sistema operativo e non sono necessari tempi di download! Sono utilizzati da Weather.com, GitHub, Bootstrap, Medium, Ghost, Booking.com (leggi la storia dei loro font di sistema), PubMed e persino la dashboard di WordPress. Secondo la mia opinione personale, i caratteri di sistema hanno un aspetto leggermente migliore su macOS rispetto a Windows.

I caratteri di sistema non sono una novità. In effetti, Medium li utilizzava nel 2015. Si sentono proprio come il tuo sistema operativo perché utilizzano caratteri nativi. Molti sistemi operativi moderni scelgono i caratteri in modo molto saggio e tutti hanno un aspetto molto elegante. Non è come tornare a un font sicuro per il web di Arial o Times New Roman. Fidati di me; nessuno vuole vedere Times New Roman su un sito web.

E soprattutto, i caratteri di sistema funzionano proprio come i caratteri sicuri per il Web, in quanto non richiedono alcun tempo di download da parte del browser. Questo può aiutare a ridurre il peso complessivo della pagina sul tuo sito web. Ad aprile 2022, i caratteri web, in media, rappresentano circa il 6,07% del peso totale di un sito web. Anche se questo non è enorme, ricorda che ogni piccola ottimizzazione che fai si aggiunge a un sito web veloce, specialmente sui dispositivi mobili.

Ci sono degli svantaggi nell'usare i font di sistema? No! Questo è il bello. Avvisi in PageSpeed ​​Insights come "Assicurati che il testo rimanga visibile durante il caricamento dei caratteri" non entrano mai in gioco, perché tecnicamente non viene scaricato nulla.

Stack di font di sistema CSS

Con la proprietà font-family con i caratteri Web, in genere hai il tuo carattere principale e uno o due caratteri di riserva. Con i caratteri di sistema, devi includere tutti i diversi sistemi operativi e quindi devi impilare un bel po' di caratteri in più. Questo è il motivo per cui è chiamato "stack di font di sistema".

Ad esempio, ecco come potrebbero apparire i CSS con un font web.

 famiglia di caratteri: "Open Sans","Helvetica Neue",sans-serif;

Ed ecco come potrebbe apparire uno stack di font di sistema. La buona notizia è che non si stanno caricando tutti; è solo un ordine di quali caratteri dovrebbero essere caricati dal sistema operativo se sono disponibili.

 famiglia di caratteri: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

Sapevi che la tua dashboard di WordPress utilizza uno stack di caratteri di sistema? Ecco cosa stanno usando.

 famiglia di caratteri: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif

CSS-Tricks ha anche un metodo alternativo su come applicare i caratteri di sistema usando @font-face.

Cheatsheet dello stack dei caratteri di sistema

Qui è dove devi scegliere quale configurazione desideri. Di seguito è riportato un elenco di quali caratteri vanno con ciascun sistema operativo. Nota: questo cambia nel tempo, quindi potrebbe essere necessario rivedere i caratteri quando emergono nuovi sistemi operativi. Mi assicurerò di mantenere aggiornato questo elenco.

Come implementare uno stack di font di sistema

Uso uno stack di caratteri di sistema qui su woorkup.com e su tutti gli altri miei siti Web. Mi sento come se avessi finalmente trovato il meglio di entrambi i mondi. Ed ecco come l'ho fatto.

Opzione 1: usa il tema GeneratePress WordPress

Vuoi renderlo super facile? Basta passare al tema GeneratePress, che è quello che uso su tutti i miei siti web. Nella personalizzazione, in Tipografia, puoi semplicemente selezionare "Stack di sistema". E questo è tutto!

Anche altri temi incentrati sulle prestazioni come Astra hanno la possibilità di utilizzare i caratteri di sistema.

Opzione 2: aggiungi lo stack di caratteri di sistema con CSS

Se stai utilizzando un altro tema WordPress, puoi passare facilmente a uno stack di font di sistema con un po' di CSS.

Passo 1

In WordPress, dovrai cambiare il CSS sulla tua font-family . Puoi utilizzare il personalizzatore di WordPress per aggiungere il codice, in "CSS aggiuntivo".

Passo 2

Inserisci il codice seguente. Questo potrebbe variare in base al tema, ma per la maggior parte, quanto segue dovrebbe sovrascrivere tutto. Sto usando lo stesso stack di caratteri di sistema di GithHub, tranne per il fatto che sto aggiungendo system-ui poiché le versioni più recenti di Chrome lo supportano. Ricorda, verranno utilizzati nell'ordine in cui appaiono nella pila.

 body {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 ", "Simbolo dell'interfaccia utente di Segoe";}

A seconda del tema, potrebbe essere necessario aggiungere tag di paragrafo per il contenuto del corpo. Quindi sarebbe questo:

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

Passaggio 3

Dovrai anche disabilitare tutti i font di terze parti, come Google Fonts, che hai caricato dal tuo tema WordPress. Anche questo può variare, poiché ogni sviluppatore include i caratteri in modo diverso. Ma molti temi ora hanno un modo semplice per attivare o disattivare Google Fonts.

Se utilizzi uno dei temi predefiniti di WordPress, puoi facilmente utilizzare il plug-in gratuito Disable Google Fonts. Oppure puoi anche disabilitare i caratteri di Google nel nostro plug-in Perfmatters.

Prima e dopo le prove di velocità

E, ovviamente, non ho resistito. Ecco prima e dopo le prove di velocità. Ogni test è stato eseguito cinque volte ed è stata calcolata una media.

Prova di velocità prima

Ecco il test di velocità prima, quando avevo il caricamento dei caratteri di Google.

Prova di velocità dopo

Ecco il test di velocità dopo aver utilizzato lo stack di caratteri del mio sistema. Come puoi vedere, ho ridotto il peso della mia intera pagina di circa 60 KB e mi sono sbarazzato di tre richieste. Uno su fonts.googleapis.com e poi due download per diverse versioni di Roboto con peso dei caratteri. Lo stack dei caratteri di sistema era circa il 6% più veloce rispetto all'utilizzo dei caratteri Google .

Conosco molti siti che utilizzano 4-5 caratteri o stili diversi e talvolta anche 2-3 caratteri Google diversi. Quindi potresti potenzialmente vedere miglioramenti ancora più significativi di quelli che ho fatto io.

Ho anche spostato il nostro sito WordPress novashare.io sui caratteri di sistema e ho ottenuto ottimi risultati; dai un'occhiata a questo test di velocità di seguito.

Levigatura dei caratteri

La levigatura dei caratteri dipende dalle preferenze personali. Quando applichi l'antialias, il tuo carattere sarà un po' più sottile e leggero. Non lo sto usando su questo sito perché preferisco il carattere leggermente più spesso; Penso che sia un po' più caldo. Ma puoi sperimentare entrambi per vedere quale ti piace.

Puoi aggiungerlo al corpo.

 corpo {
-webkit-font-smoothing: antialias;
-moz-osx-font-smoothing: scala di grigi;
}

Sommario

I caratteri di sistema possono essere un'ottima alternativa ai caratteri Web e ai caratteri sicuri per il Web. Mi piace ancora molto l'aspetto del mio carattere e ora so che non sta causando alcun carico agli utenti. Anche se i caratteri di Google possono essere ospitati localmente, fa ancora parte del peso complessivo della pagina.

Curioso quali sono i tuoi pensieri? Hai già utilizzato uno stack di font di sistema con WordPress? Se è così, fammi sapere di seguito.