Tinkerfont n'est pas une fonte. C'est une extension navigateur gratuite pour Chrome et Firefox qui permet d'inspecter et de tester n'importe quelle fonte sur n'importe quel site, sans ouvrir le code.
Les Notes from Building Tinkerfont publiées le 29 juin 2026 sur mighil.com racontent comment elle a été construite. Elles corrigent le malentendu : le projet ne dessine pas de caractères, il outille designers et développeurs front pour voir et essayer des fontes en conditions réelles.
Ce que disent les Notes du 29 juin 2026 : une extension, pas une fonte
Les Notes décrivent Tinkerfont comme un playground de fontes intégré au navigateur. L'idée est simple : tu navigues sur un site, tu veux savoir quelle fonte est utilisée et à quoi ressemblerait une autre, tu le fais en direct.
L'extension est gratuite. Elle s'installe sur Chrome et Firefox. Elle n'ajoute pas une nouvelle famille typographique à installer, elle révèle celles déjà présentes et permet de les remplacer à la volée. C'est ce positionnement qui explique l'intérêt du retour d'expérience : construire un outil qui s'insère partout, sans dépendre du site visité.
Le récit technique insiste sur le choix de Manifest V3 avec service worker et content scripts. C'est le standard actuel des extensions Chrome. Il impose des contraintes d'exécution que les Notes détaillent, comme la nature éphémère du service worker et l'isolation des scripts injectés dans la page.
Inspecter au clic droit et tester une autre fonte sans toucher au code
Au quotidien, Tinkerfont sert à deux choses.
D'abord l'inspection. Un clic droit sur un texte affiche sa famille, son poids, sa taille, sa couleur et son contraste. Tu identifies en une seconde ce qui est appliqué, sans fouiller l'inspecteur.
Ensuite le remplacement en direct. Un panneau latéral permet de changer la fonte de la page, y compris en important tes propres fichiers. Tu peux charger une fonte locale ou piocher dans un catalogue et voir le rendu immédiat sur la mise en page réelle, avec ses longueurs de ligne, ses interlignages et ses contraintes.
L'intérêt est concret pour un designer qui hésite entre deux fontes ou un développeur qui veut valider la lisibilité avant de modifier une feuille de style. Tu testes sur le site live, tu compares, tu reviens en arrière en un clic. Pas besoin de dupliquer le projet ou d'éditer le CSS à la main.
Ce type d'outil devient utile quand Code pas cher : pourquoi savoir coder ne suffit plus en 2025 rappelle que la valeur ne vient plus seulement du code, mais de la capacité à itérer vite sur le produit visible.
Comment ça marche sous le capot : Manifest V3, Data URLs et suivi du DOM
Les Notes expliquent les compromis techniques derrière l'apparente simplicité.
Manifest V3 structure l'extension autour d'un service worker et de content scripts qui s'exécutent dans le contexte de la page. Le service worker gère les événements et la durée de vie, les content scripts lisent le DOM et appliquent les changements.
Le point difficile est la politique de sécurité du site (CSP). De nombreux sites bloquent le chargement de fontes externes. Pour passer cette barrière, Tinkerfont convertit les fontes servies par Bunny Fonts en Data URLs. La fonte est encodée directement dans la page, ce qui évite une requête externe bloquée. C'est efficace, mais cela a un coût : plus de données inline, moins de cache navigateur classique, et une logique de conversion à maintenir.
Pour les sites modernes, l'extension ajoute un MutationObserver. Les Single-Page Applications modifient le DOM sans recharger la page. L'observateur détecte les ajouts dynamiques et réapplique les remplacements, sinon la nouvelle page réaffiche l'ancienne fonte.
Le choix de Bunny Fonts n'est pas anodin. Le service se présente comme une alternative open-source à Google Fonts, sans suivi et conforme au RGPD, compatible avec l'API CSS v1 de Google Fonts par simple échange d'URL. Pour un outil qui s'injecte partout, éviter un appel traçeur et garder la compatibilité d'URL simplifie l'intégration. La tension reste : la conformité et la compatibilité pèsent d'un côté, la dépendance à un fournisseur unique et la conversion en Data URLs pèsent de l'autre.
Comprendre cette architecture aide à anticiper les limites. Une CSP très stricte reste contournable dans la plupart des cas, mais une page qui recrée massivement son DOM peut demander un réappliquage visible. Code pas cher : pourquoi savoir coder ne suffit plus en 2025 illustre bien ce déplacement : la difficulté n'est plus d'écrire le code, mais de le faire cohabiter avec des environnements que tu ne contrôles pas.
Où lire les Notes quand la page d'origine ne répond plus
La page originale https://mighil.com/notes-from-building-tinkerfont n'affichait plus de contenu le 29 août 2026 et son cache Google était vide. Le texte reste consultable via l'archive datée du 29 juin 2026 et le compte-rendu secondaire du 4 juillet 2026 qui résume l'architecture.
Pour utiliser l'extension, installe-la depuis le Chrome Web Store ou les modules Firefox, ouvre n'importe quel site, fais un clic droit pour inspecter une fonte, puis ouvre le panneau latéral pour remplacer. Teste d'abord avec une fonte système, puis avec un fichier perso et enfin avec une fonte Bunny Fonts. Tu verras tout de suite l'impact sur la hiérarchie, la longueur de ligne et le contraste réel.
