Passer à une pile de polices système dans WordPress (comment et pourquoi)

Je suis un grand fan des performances Web. Mais je ne pense pas non plus que cela devrait ou doive compromettre la conception. Il y a toujours un bon équilibre au milieu. En 2017, j'étais sur le blog de GitHub et je creusais leur police. C'était super facile à lire. J'ai donc creusé dans les propriétés avec Chrome Devtools et j'ai vu qu'ils utilisaient une pile de polices système .

J'utilise les polices système depuis des années et je les adore. Alors aujourd'hui, je veux vous montrer comment utiliser une pile de polices système sur votre site WordPress.

Qu'est-ce qu'une pile de polices système ?

Il existe différents types de polices parmi lesquelles choisir pour un site Web. Vous avez à peu près quatre options différentes :

• Polices sécurisées pour le Web : gratuites et sans temps de téléchargement requis par le navigateur, mais elles ont généralement l'air obsolètes et ne sont donc pas beaucoup utilisées. Personne n'aime vraiment Arial ou Tahoma, n'est-ce pas ? Consultez la liste complète des polices sécurisées pour le Web.
• Polices Web : elles sont belles, mais doivent être téléchargées par le navigateur. Avoir à la fois des options gratuites et premium disponibles. Ajoute au poids total de la page de votre site Web. Cependant, ils peuvent être servis à partir d'un CDN mis en cache. Les fournisseurs incluent Google, Adobe Fonts (TypeKit), etc.
• Hébergez les polices Web localement : des options gratuites et premium sont disponibles. Il nécessite toujours du temps de téléchargement et peut tirer parti d'une seule connexion HTTP/2 sur le CDN en cache. Tous les principaux navigateurs ont maintenant un partitionnement de cache séparé, donc les héberger localement est en fait meilleur pour les performances. Vous pouvez héberger vos polices Google localement avec Perfmatters.
• Polices système : gratuites, très belles car elles correspondent au système d'exploitation, et aucun temps de téléchargement n'est requis ! Ils sont utilisés par Weather.com, GitHub, Bootstrap, Medium, Ghost, Booking.com (lisez leur histoire de police système), PubMed et même votre tableau de bord WordPress. À mon avis, les polices système sont légèrement meilleures sur macOS que sur Windows.

Les polices système ne sont pas nouvelles. En fait, Medium les utilisait en 2015. Ils ressemblent à votre système d'exploitation car ils utilisent des polices natives. De nombreux systèmes d'exploitation modernes choisissent les polices très judicieusement, et tous ont un aspect très élégant. Ce n'est pas comme si vous reveniez par défaut à une police sécurisée pour le Web, Arial ou Times New Roman. Fais-moi confiance; personne ne veut voir Times New Roman sur un site Web.

Et le meilleur de tous, les polices système fonctionnent comme des polices sécurisées pour le Web, en ce sens qu'elles ne nécessitent aucun temps de téléchargement par le navigateur. Cela peut aider à réduire le poids global de la page sur votre site Web. En avril 2022, les polices Web représentaient en moyenne environ 6,07 % du poids total d'un site Web. Bien que ce ne soit pas énorme, rappelez-vous que chaque petite optimisation que vous faites ajoute à un site Web rapide, en particulier sur mobile.

Y a-t-il des inconvénients à utiliser les polices système ? Non! C'est la beauté de celui-ci. Les avertissements dans PageSpeed ​​Insights tels que "Assurez-vous que le texte reste visible pendant le chargement de la police" n'entrent même jamais en jeu, car techniquement, rien n'est téléchargé.

Pile de polices système CSS

Avec la propriété font-family avec les polices Web, vous avez généralement votre police principale et une ou deux polices de secours. Avec les polices système, vous devez inclure tous les différents systèmes d'exploitation et, par conséquent, vous devez empiler un certain nombre de polices supplémentaires. C'est pourquoi on l'appelle une "pile de polices système".

Par exemple, voici comment CSS pourrait apparaître avec une police Web.

 font-family : "Open Sans","Helvetica Neue",sans-serif ;

Et voici à quoi pourrait ressembler une pile de polices système. La bonne nouvelle est qu'ils ne sont pas tous en cours de chargement ; c'est juste un ordre dans lequel les polices doivent être chargées à partir du système d'exploitation si elles sont disponibles.

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

Saviez-vous que votre tableau de bord WordPress utilise une pile de polices système ? Voici ce qu'ils utilisent.

 famille de polices : -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif

CSS-Tricks propose également une méthode alternative pour appliquer les polices système à l'aide de @font-face.

Aide-mémoire sur la pile de polices système

C'est ici que vous devez choisir la configuration que vous souhaitez. Voici une liste des polices qui vont avec chaque système d'exploitation. Remarque : cela change avec le temps, vous devrez donc peut-être revoir vos polices à mesure que de nouveaux systèmes d'exploitation apparaissent. Je veillerai à tenir cette liste à jour.

Comment implémenter une pile de polices système

J'utilise une pile de polices système ici sur woorkup.com et sur tous mes autres sites Web. J'ai l'impression d'avoir enfin trouvé le meilleur des deux mondes. Et voici comment je l'ai fait.

Option 1 : Utiliser le thème WordPress GeneratePress

Vous voulez rendre cela super facile ? Passez simplement au thème GeneratePress, que j'utilise sur tous mes sites Web. Dans le personnalisateur, sous Typographie, vous pouvez simplement sélectionner "System Stack". Et c'est tout!

D'autres thèmes axés sur les performances comme Astra ont également la possibilité d'utiliser des polices système.

Option 2 : Ajouter une pile de polices système avec CSS

Si vous utilisez un autre thème WordPress, vous pouvez facilement passer à une pile de polices système avec un peu de CSS.

Étape 1

Dans WordPress, vous devrez changer le CSS de votre font-family . Vous pouvez utiliser le personnalisateur WordPress pour ajouter le code, sous « CSS supplémentaire ».

Étape 2

Entrez le code suivant. Cela peut varier selon le thème, mais pour la plupart, ce qui suit devrait remplacer tout. J'utilise la même pile de polices système que GithHub, sauf que j'ajoute system-ui car les nouvelles versions de Chrome le prennent en charge. N'oubliez pas qu'ils seront utilisés dans l'ordre dans lequel ils apparaissent dans la pile.

 corps {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" ", "Symbole d'interface utilisateur Segoe" ;}

Selon votre thème, vous devrez peut-être ajouter des balises de paragraphe pour le contenu du corps. Ce serait donc ça :

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

Étape 3

Vous voudrez également désactiver toutes les polices tierces, telles que les polices Google, que vous avez chargées à partir de votre thème WordPress. Cela peut encore varier, car chaque développeur inclut les polices différemment. Mais de nombreux thèmes disposent désormais d'un moyen simple d'activer ou de désactiver les polices Google.

Si vous utilisez l'un des thèmes WordPress par défaut, vous pouvez facilement utiliser le plugin gratuit Disable Google Fonts. Ou vous pouvez également désactiver les polices Google dans notre plugin Perfmatters.

Avant et après les tests de vitesse

Et, bien sûr, je n'ai pas pu résister. Voici les tests de vitesse avant et après. Chaque test a été exécuté cinq fois et une moyenne a été prise.

Test de vitesse avant

Voici le test de vitesse précédent, lorsque j'avais le chargement des polices Google.

Test de vitesse après

Voici le test de vitesse après avoir utilisé ma pile de polices système. Comme vous pouvez le voir, j'ai réduit le poids de ma page entière d'environ 60 Ko et je me suis débarrassé de trois requêtes. Un sur fonts.googleapis.com, puis deux téléchargements pour différentes versions de poids de police de Roboto. La pile de polices système était environ 6 % plus rapide que l'utilisation des polices Google .

Je connais beaucoup de sites qui utilisent 4 à 5 poids ou styles de police différents, et parfois même 2 à 3 polices Google différentes. Ainsi, vous pourriez potentiellement voir des améliorations encore plus importantes que moi-même.

J'ai également déplacé notre site WordPress novashare.io vers les polices système et j'ai obtenu d'excellents résultats ; Découvrez ce test de vitesse ci-dessous.

Le lissage des polices

Le lissage des polices dépend de vos préférences personnelles. Lorsque vous appliquez l'anticrénelage, votre police sera un peu plus fine et plus claire. Je ne l'utilise pas sur ce site car je préfère la police légèrement plus épaisse ; Je pense qu'il fait un peu plus chaud. Mais vous pouvez expérimenter les deux pour voir celui que vous aimez.

Vous pouvez l'ajouter au corps.

 corps {
-webkit-font-smoothing : anticrénelé ;
-moz-osx-font-smoothing : niveaux de gris ;
}

Résumé

Les polices système peuvent constituer une excellente alternative aux polices Web et aux polices sécurisées pour le Web. J'aime toujours beaucoup l'apparence de ma police, et maintenant je sais que cela ne cause aucune charge pour les utilisateurs. Même si les polices Google peuvent être hébergées localement, elles font toujours partie du poids global de la page.

Curieux de savoir ce que vous pensez ? Avez-vous déjà utilisé une pile de polices système avec WordPress ? Si oui, faites-le moi savoir ci-dessous.