Test de web fonts avec Geist et Geist Mono

Table des matières

Pour faire quelques tests actuels sur les polices web (web fonts), j’ai décidé d’utiliser Geist et Geist Mono sur ce site. Ce sont des familles de caractères modernes et disponibles en format variable. Elles permettent de combiner élégamment sans-serif et chasse fixe.

Je rappelle que dans la majorité des cas, les polices web ne sont pas nécessaires. L’utilisation de polices locales (system font stack) est plus performante, plus simple et pas forcément moins élégante. J’en parle dans Polices système en 2026.

Geist et Geist Mono

Pour en savoir un peu plus sur ces polices, je vous conseille Geist chez Vercel, l’entreprise les a commandées et les diffuse gratuitement.

Ou alors le faire-part de naissance par l’agence qui les a créées: The Birth of Geist: A Typeface Crafted for the Web.

Ou encore l’analyse de l’excellent Oliver Schöndorfer: Geist chez Pimp my Type.

Implémentation classique

Dans un premier temps (commit a536d60), j’ai fait ce qu’il y a de plus classique:

C’est très simple, ça fonctionne bien. On pourrait s’arrêter là, mais on peut faire mieux en 2 minutes.

Optimisation par subset

Pour le commit 5ab173e, j’ai simplement allégé les fichiers avec Glyphhanger:

glyphhanger --formats=woff2 --subset=* --LATIN

Il n’y a donc plus que les caractères latins dans les fontes et on économise en gros 50% de taille. Comme je publie du français (en tout cas j’essaie) et du code (j’essaie aussi), c’est très bien ainsi.

Feuilles de style (CSS) externes

Je suis allé un peu plus loin avec le commit 14ea4f4:

C’est probablement la meilleure solution pour un site organisationnel standard sur lequel les internautes reviennent régulièrement. Les CSS et les polices sont en cache pour 2 ans et tout va bien.

Je parle de la gestion du cache dans htaccess pour site statique chez Infomaniak.

Choix pragmatique

Il est visible dans le commit f880215:

Quand la police n’est pas variable, le meilleur outil pour les télécharger est google-webfonts-helper. Mais quand la police est variable, il faut ruser.

Google Fonts fournit un fichier CSS qui se charge de tous les @font-face utiles. L’extrait qui m’intéresse ressemble à:

/* latin */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/geist/v5/gyByhwUxId8gMEwcGFU.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Je le reprends sans le unicode-range, je télécharge la police et je la renomme g.woff2 dans /fonts/. Ainsi je profite des optimisations de Google Fonts qui allège les polices (en leur faisant perdre quelques fonctions que je n’utilise pas). Avec environ 100ko, j’ai mes 4 fichiers avec toutes les graisses disponibles et de vrais italiques, en sans-serif et en mono.

Je conserve les CSS internes, parce que c’est la solution la plus légère. Mes feuilles de styles sont tellement petites que je soupçonne que cela coûte moins de temps et d’énergie de les charger à chaque fois plutôt que de vérifier le cache. (Je suis preneur de données scientifiques sur le sujet.) Avantage, les pages sont toujours cohérentes entre contenu (HTML) et forme (CSS), notamment quand elles sont sauvegardées dans la Wayback Machine de l’Internet Archive.

Je ne précharge rien, parce qu’il y a un grand risque de transférer entre 1 et 3 fichiers pour rien. Seule g.woff2, utilisée sur toutes les pages, pourrait être préchargée. Je décide de laisser faire le navigateur. Mon choix, c’est de minimiser la bande passante avant d’optimiser la vitesse pure.

J’active swap pour l’affichage, qui peut me faire perdre quelques pourcents de performances chez PageSpeed Insights. Mais je m’assure d’avoir Geist et Geist Mono à l’écran.

Avec optional, je pourrais assurer un résultat de 100%. Mais avec un risque de ne pas voir les polices choisies dans quelques cas.

Si je voulais des performances maximales, je ne chargerais tout simplement pas de fichiers externes, même légers.

Après les tests

En fait, je souhaite des performances 🚀 maximales 🏆.

Suite à ce billet de tests, j’en reviens à des polices locales. Le commit 3eae0a3 documente le retour.

Si vous installez Geist et Geist Mono sur votre périphérique, ce sont elles qui s’afficheront en priorité, selon la logique du «font stack».

Et sinon, j’espère avoir bien fait les choses pour vous proposer un site lisible sans le moindre chargement de police.