Générateur d'incorporation Base64 pour WOFF2 | Une requête HTTP de police en moins

Une police web auto-hébergée chargée via un fichier .woff2 séparé déclenche une requête HTTP supplémentaire après l'analyse du CSS. C'est précisément dans l'intervalle entre la fin du parsing CSS et l'arrivée de la fonte que le FOUT (Flash of Unstyled Text) apparaît. En incorporant la fonte en Data URI base64 dans la règle @font-face, on ferme les deux problèmes : le navigateur dispose de la fonte au moment où la règle est évaluée.

Cet outil encode le .woff2 en base64 dans le navigateur, te laisse régler font-family, font-weight, font-style et font-display, et produit un bloc @font-face prêt à coller avec src: url(data:font/woff2;base64,…) format('woff2'). Le récapitulatif au-dessus de la sortie compare la taille brute et la taille base64 pour rendre visible le coût de l'inflation, avec un avertissement quand le fichier dépasse 100 Ko.

💡 À propos de cet outil

Pourquoi incorporer la fonte plutôt que la servir via un CDN ? En janvier 2022, le tribunal régional de Munich (LG München I, Az. 3 O 17493/20) a jugé que charger Google Fonts depuis un domaine européen exposait des données personnelles (l'adresse IP) à un tiers américain en violation du RGPD. La conséquence : beaucoup d'équipes ont basculé en auto-hébergement — ce qui réintroduit la requête HTTP supplémentaire que cet outil supprime sans renoncer à l'auto-hébergement.

L'alternative manuelle consiste à lancer base64 -i police.woff2 en ligne de commande, à coller le résultat dans un bloc @font-face, puis à composer à la main l'URL src avec format('woff2'). Cela fonctionne une fois, mais le cycle recommence à chaque changement de fonte, de nom font-family ou d'une des quatre propriétés font-*. L'outil automatise ce cycle. Les apostrophes dans le nom font-family sont automatiquement échappées, donc des noms comme 'JetBrains Mono' ou 'IBM Plex Sans Var' se collent sans casser la syntaxe.

🧐 Questions fréquentes

Q. Quand vaut-il mieux NE PAS incorporer un .woff2 ? A. Au-delà d'environ 100 Ko bruts, l'incorporation commence à dégrader le First Contentful Paint au lieu de l'améliorer : le bundle CSS gonfle et se met lui-même à bloquer le rendu. L'outil prévient au-delà de 100 Ko. Pour des fontes plus volumineuses, il faut sous-ensembler avec unicode-range (supprimer les glyphes inutilisés) ou conserver une référence url() externe avec preload.

Q. Pourquoi le base64 ajoute-t-il environ 33% à la taille ? A. Le base64 utilise 4 octets ASCII pour représenter chaque groupe de 3 octets binaires (6 bits par caractère × 4 = 24 bits = 3 octets). Sur le réseau, la compression Brotli ou gzip du bundle CSS rattrape presque toute l'inflation — il reste généralement 10 à 15 % de surcoût net après compression — mais la charge brute reste plus grosse que le .woff2 binaire.

Q. Quelle valeur de font-display choisir ? A. Pour le corps et les titres, swap est le réglage par défaut sûr : une police de repli s'affiche immédiatement et est remplacée à l'arrivée de la web font. Pour des fontes d'icônes, préfère block (court délai de blocage puis fallback). Pour des titres décoratifs où une arrivée tardive serait pire que rien, optional autorise le navigateur à abandonner si la fonte rate un budget d'environ 100 ms.

Q. Comment gérer plusieurs variantes (gras, italique) ? A. Génère un bloc @font-face séparé pour chaque fichier .woff2, garde le même nom font-family sur tous, et fais varier uniquement font-weight et font-style. Le navigateur sélectionnera automatiquement le bon quand le CSS demandera font-weight: 700 ou font-style: italic. Pour une fonte variable qui embarque plusieurs graisses dans un seul .woff2, écris un unique bloc avec font-weight: 100 900 (syntaxe de plage).

Q. La fonte incorporée est-elle mise en cache séparément ? A. Non — elle est intégrée au fichier CSS, donc elle partage sa durée de vie de cache. Si tes déploiements CSS sont fréquents et que la fonte change rarement, une référence url() externe avec un long Cache-Control peut être plus avantageuse sur les visites répétées. L'incorporation brille au premier rendu pour les visiteurs à cache froid.

Q. format('woff2') est-il obligatoire dans src: ? A. Pas strictement, dans un site 100% WOFF2, mais cela permet au navigateur de sauter le Data URI si .woff2 n'était pas supporté (concrètement aucun navigateur moderne actuel, mais l'indication est inoffensive et l'outil la génère).

📚 Le saviez-vous

Les formats de police web ont évolué selon la séquence .eot → .ttf → .woff → .woff2, et la version 2.0 utilise une compression de classe Brotli, ce qui la rend environ 30 % plus petite que .woff pour le même jeu de glyphes. Web Open Font Format 2.0 a atteint le statut de W3C Recommendation en mars 2018, et depuis fin 2022 c'est le seul format dont on a besoin — Microsoft a retiré IE11 de Microsoft 365 en août 2021, et tous les autres navigateurs supportent .woff2 depuis 2015.

L'astuce des Data URI base64 pour les fontes est antérieure à .woff2. Les brouillons de CSS3 de 2009 décrivaient déjà src: url(data:application/x-font-ttf;base64,…) pour les .ttf, et les premiers kits d'icon-fonts comme Fontello proposaient dès leurs débuts une option de téléchargement "base64 dans le CSS". Ce qui a changé avec .woff2, c'est le budget de taille : à un tiers du poids d'un .ttf, incorporer une police de corps est enfin devenu raisonnable plutôt qu'absurde.