Favoriser les polices standards

Ce que dit le référentiel

Préférer les polices standards, car elles sont déjà présentes sur l’ordinateur de l’utilisateur, qui n’a donc pas besoin de les télécharger. On économise ainsi de la bande passante, tout en accélérant l’affichage du site. Ces polices standards sont listées sur https://systemfontstack.com/, par exemple.

Cependant si vous avez besoin d'une police particulière pour votre service numérique, même si c'est une Api font (google font, adobe font, etc.), vous devez :

• Héberger vous-même la font
• Utiliser un faux-gras via la propriété css -webkit-text-stroke si possible
• Préférer une variable font si vous avez besoin de plus d'une font d'une police (ex: regular, bold, etc.)
• Optimiser la font en l'allégeant des caractères non nécessaires (exemple: un site en français n'a besoin que de caractères latins, l'alphabet cyrillique peut donc être supprimé)
• Enfin, limiter leur nombre (bonne pratique de web design déjà reconnue) à deux maximum, le moins possible étant le mieux.

Si vous avez des pictogrammes ou illustrations monochromes (voir la bonne pratique : Préférez les glyphes aux images) et si les droits d'utilisations de la font le permettent, incorporer les nouveaux glyphes directement dans la font.

Notre avis

L'utilisation de polices standards, déjà présentes sur les OS, élimine les besoins de téléchargement. En utilisant ces polices, nous minimisons la bande passante et accélérons l'affichage, réduisant ainsi l'empreinte environnementale.

Pour des polices spécifiques, nous nous appuyons sur Next.js pour facilement télécharger les polices Google Font. Cela évite des appels HTTP inutiles. Nous pouvons aussi optimiser les polices en enlevant les caractères superflus et en limitant leur nombre, et nous utilisons des variables font pour une meilleure gestion des styles.